Vue环境部署

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.1 模板选择

• 完成安装

图2.2 完成安装及运行提示

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

图2.3 成功运行

• 浏览器访问

http://localhost:8080

图2.4 首页

---

【参考文献】
[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#使用图形化界面