ubuntu系统下vue前端开发环境搭建

安装环境

安装nodejs

• 1、安装nodejs

sudo gpt-get install nodejs

• 2、测试安装结果

node -v

或

node --version

2、安装npm

• 1、安装npm

sudo apt-get install npm

• 2、测试安装结果

npm -v

或

npm --version

3、安装cnpm

• 1、安装cnpm，-g是全局安装

sudo npm install -g cnpm

• 2、如果慢，可以使用taobao的源

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

• 3、测试安装结果

cnpm -v

或

cnpm --version

注意：
1、因为npm版本升级后，对依赖有增删，在安装过程中，会有warning提示，一般不影响使用，可以忽略。

2、因为某些原因，npm访问很慢，经常超时，所以使用cnpm，但是cnpm不支持package-lock.json（，所以如果多人合作的项目，尽量是统一使用npm或者cnpm，否则很容易出现依赖版本不一致的情况。
参考：

• 1、https://blog.youkuaiyun.com/qq_41170600/article/details/108643770
• 2、http://nodejs.cn/learn/where-does-npm-install-the-packages
• 3、https://www.jianshu.com/p/2e459040a29f

需要知道的：

• 1、查看npm全局安装的list：npm list -g
• 2、查看npm全局安装的位置：npm root -g
• 3、进入位置目录，可以查看安装的工具，其中npm、cnpm等都在这个位置

安装框架

安装Vue

• 1、因为npm慢，所以我用cnpm
  1.x，2.x版本的Vue安装：sudo cnpm install -g vue-cli
  3.x及以上版本的安装：sudo cnpm install -g @vue/cli
• 2、如果以前安装的是2.X版本的，要升级到3.X版本，需要先卸载2.X版本

sudo cnpm uninstall -g vue-cli

• 3、验证安装结果

vue --version

idea中创建Vue项目

• 1、在ide中添加vue插件，路径：【File】-【Settings】
  

• 2、在idea中选择【File】-【New】-【Project】，打开工程【New Project】窗口，选择vue.js，然后点击【Next】
  

• 3、设置项目信息：
  3.1、项目名称，不能有大写字母
  3.2、Node Interpreter，选择安装的node
  3.3、Vue Cli，选择安装的/usr/local/lib/node_modules/@vue/cli（使用npm root -g查的路径）
  3.4、点击【Finish】
  

• 4、等待下载相关依赖，下载完毕后，在Termimal窗口，使用命令npm run serve启动本地环境
  说明：
  因为使用vue框架，可以使用命令进行项目创建，主要是命令不熟，所以直接用工具进行项目的创建，不过建议还是多学习下命令。

参考：
https://blog.youkuaiyun.com/qq_41170600/article/details/108643770