1 环境
- Node.js
- npm
- webpack
- vue-cli 3.x
1.0 安装
序号 | 环境 | 描述 | Mac安装 | Ubuntu安装 | 查看版本 |
---|---|---|---|---|---|
1 | Node.js | 运行环境 | brew install nodejs sudo chmod 777 /usr/local/lib/node_modules/ | sudo apt-get install nodejs | node -v |
2 | npm | 包管理器 | npm install -g cnpm --registry=https://registry.npm.taobao.org | sudo apt-get npm npm install -g cnpm --registry=https://registry.npm.taobao.org | |
3 | webpack | vue打包工具 | cnpm install webpack -g | cnpm install webpack -g | |
4 | vue-cli | vue模板生成器 | 2.x cnpm install vue-cli -g 3.x cnpm install @vue/cli -g | cnpm install @vue/cli -g | vue -V |
1.2 注意事项
- 安装nodejs后,修改文件夹权限
/usr/local/lib/node_modules
sudo chmod 777 /usr/local/lib/node_modules
- 使用cnpm代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 部署vue3.x
# 卸载旧版本2.x
cnpm uninstall -g vue-cli
# 安装新版本3.x
cnpm install -g @vue/cli
2 新建项目
2.1 进入指定项目文件夹
cd path/to/project/Vue
2.2 新建Vue框架
- 语法
2.x
vue init webpack 项目名称
3.x
vue create 项目名称
- 样例
2.x出现了downloading template一直转圈圈,所以选择3.x
vue init webpack prj-name
3.x
vue create prj-name
选择默认模板。
模板选择:默认和手动两种。
- 完成安装
2.3 运行项目
2.3.1 Vue2.x
- 进入项目
cd prj-name
- 安装依赖
cnpm install
- 运行项目
cnpm run dev
2.3.2 Vue3.x
- 进入项目
cd datas_show
- 运行
npm run serve
- 浏览器访问
http://localhost:8080
【参考文献】
[1]https://www.jianshu.com/p/2273e26ff6e8
[2]https://www.jianshu.com/p/60d4deda978a
[3]https://www.jianshu.com/p/cc722eba1f46
[4]https://blog.csdn.net/sinat_33384251/article/details/93127561
[5]https://www.jianshu.com/p/02b12c600c7b
[6]https://cli.vuejs.org/zh/guide/creating-a-project.html#使用图形化界面