vue.js安装教程

会飞的鱼

vue.js安装教程

一、环境准备

1)node.js环境,同时自带(npm包管理器)

2)vue-cli脚手架构建工具

3)安装webpack

二、官网下载Node.js 下一步即可

1)、查看版本号:

node -v

npm -v

2)npm镜像安装


npm install --registry=https://registry.npm.taobao.org


查看版本号

cnpm -v

3)安装webpack (包管理工具)

npm install webpack -g

webpack -v

4)安装vue-cli脚手架构建工具

npm install vue-cli -g

5)用vue-cli 构建项目

vue init webpack-simple [工程名称]

进入工程名称根目录运行控制台窗口

安装脚手架基本支持包:

npm i


6)启动项目

在项目根目录下按住shift+右键进入命令窗

npm run dev

后台解决方案

http://panjiachen.github.io/vue-element-admin/#/dashboard

PS:

1、安装less样式组件

npm i less style-loader css-loader less-loader -D

然后在webpack.config.js的modules中加入以下配置:

modules :{


{
test:/\.less$/,
loader:"style!css!less"
},
}

在/assets/中添加一个todos.less文件,并在App.vue的组件定义内引入less样式表:

import './assets/todos.less'

export default {

//...省略

}

如果想让less样式仅作用于当前页面,可以使用<style scoped>,然后用CSS的@import导入样式表:

<style scoped>

@import './assets/todos.less'

</style>


2、时间格式化组件

npm i moment -S

然后将组件引入,并设定comment区域为中国

import moment from 'moment'

import 'moment/locale/zh-cn'

moment.locale('zh-cn')

然后加入一个date的过滤器

export default {

    //省略....

    filters:{

        date(val) {

            return moment(val).calendar()

        }

    }

}



×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:就去赚 » vue.js安装教程

网友评论(0)