VUE项目创建过程及本地运行

VUE项目创建过程及本地运行

VUE创建过程

0)、安装 Node.js

1)、安装环境：（安装淘宝镜像、webpack、vue-cli）

npm install -g cnpm --registry=http://registry.npm.taobao.org
npm install webpack -g
npm install vue-cli -g

2)、创建项目：<工程名字不能用中文>

vue init webpack-simple 工程名字

3)、安装vue路由模块和网络请求模块：

npm install vue-router vue-resource --save

4)、启动项目：（进入项目、安装项目依赖、运行项目）

cd 工程名字
npm install
npm run dev

VUE运行（VSCode编辑器）
1). 安装 BrowserSync
npm install -g browser-sync
2). 启动 BrowserSync
静态网站：
// –files 路径是相对于运行该命令的项目（目录）
browser-sync start –server –files “css/.css, .html”
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。
browser-sync start –server –files “/.css, /.html”

一般用到的vue插件安装

安装vue element UI
npm i element-ui -S
安装axios
先安装！
npm install axios
然后！
npm install –save axios vue-axios
安装less
1.npm install less less-loader –save-dev
2、在style中声明lang=”less”。 注意： scoped的作用仅仅是限定css的作用域，防止变量污染。
3、这样就可以根据less的语法使用了。
安装vue-scroller
npm install vue-scroller -D
安装vux

npm install vux –save

具体查看https://doc.vux.li/zh-CN/install/npm.html