创建vue项目步骤

一、安装node

1. 下载地址: https://nodejs.org/en/

• 安装完成后打开命令行输入 node -v可查看node版本
• npm -v查看npm版本

2. 使用淘宝的镜像： http://npm.taobao.org/

• 在命令行输入：npm install -g cnpm –registry=https://registry.npm.taobao.org
• 输入cnpm -v 查看版本

二、全局安装vue-cli

• 在命令行输入：npm install --global vue-cli 或 cnpm install --global
  vue-cli
• 安装完成后在命令行输入 vue -V 查看版本

三、创建Vue项目

1.两种不同的创建方式

• vue-cli2.x 创建方式为 vue init webpack projectName
• vue-cli3.x 及以上版本可以使用 vue init webpack projectName 或者 vue create projectName 两种方式创建Vue项目

2.不同方式创建的项目结构对比

（1）使用 vue init webpack projectName

（2）使用 vue create projectName

• 按键盘上下键可以切换选择vue版本，我们选择vue2创建出来项目目录如下图：
  
• 第二种方法中取消掉了config目录、build目录、static。如需要添加配置； 在项目的根目录下添加vue.config.js文件，项目在启动时会自动去检测是否存在vue.config.js文件，如果存在就会读取里面的配置信息。

四、运行项目

1.不同方式创建的项目启动

（1）使用 vue init webpack projectName

• 命令行进入项目根目录下 输入: npm run dev 启动项目

（2）使用 vue create projectName

• 命令行进入项目根目录下 输入: npm run serve 启动项目

也可以自己配置命令： 在根目录下的 package.json 文件中的scripts中设置

四、打包项目

• 进入项目的根目录 执行 npm run build 命令，完成后在根目录下会新增一个dist目录就是我们项目打包的代码文件