Vue环境部署_若依vue环境部署

1 环境

• Node.js
• npm
• webpack
• vue-cli 3.x

1.0 安装

1.2 注意事项

• 安装nodejs后，修改文件夹权限
  /usr/local/lib/node_modules

sudo chmod 777  /usr/local/lib/node_modules
1

• 使用cnpm代替npm

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

• 部署vue3.x

# 卸载旧版本2.x
cnpm uninstall -g vue-cli
# 安装新版本3.x
cnpm install -g @vue/cli
1
2
3
4

2 新建项目

2.1 进入指定项目文件夹

cd path/to/project/Vue
1

2.2 新建Vue框架

• 语法
  2.x

vue init webpack 项目名称
1

3.x

vue create 项目名称
1

• 样例

2.x出现了downloading template一直转圈圈，所以选择3.x

vue init webpack prj-name
1

3.x

vue create prj-name
1

选择默认模板。
模板选择：默认和手动两种。

图2.1 模板选择

• 完成安装

图2.2 完成安装及运行提示

2.3 运行项目

2.3.1 Vue2.x

• 进入项目

cd prj-name
1

• 安装依赖

cnpm install
1

• 运行项目

cnpm run dev
1

2.3.2 Vue3.x

• 进入项目

cd datas_show
1

• 运行

npm run serve
1

图2.3 成功运行

• 浏览器访问

http://localhost:8080
1

图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#使用图形化界面