创建 vue-cli 项目

Vue：创建 vue-cli 项目

一、前言

流程

​ Vue是前端开发框架。搭建框架，首先要搭建环境。搭建Vue的环境工具：node.js（JavaScript的运行环境），然后再用nodejs里面的npm（包管理和分发工具）来安装依赖包

什么是vue-cli

​ vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板（即骨架项目）

​ 作用：让我们的开发更加快速

​ 主要功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

二、知识准备

需要先了解和熟悉以下 vue 的知识

• vue-router

• vuex

• vue-resource（流行用 axios 代替）

三、环境工具

• Node.js：https://nodejs.org/en/download/

​ 确认nodejs安装成功：

• cmd 下输入 node -v，查看是否能正确打印出版本号
• cmd 下输入 npm -v，查看是否能正确打印出版本号

​ 为了解决 npm 安装依赖过慢，使用镜像可以提高下载效率

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=http://registry.npm.taobao.org

​ cnpm安装的位置：C:\Users\libingzhou\AppData\Roaming\npm

​ 安装 Vue 的脚手架工具 vue-cli

cnpm install vue-cli -g

# 测试是否安装成功
vue -V
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

​

​ 安装 webpack 工具

npm install webpack -g
npm install webpack-cli -g

​ 测试安装成功：

• webpack -v
• webpack-cli -v

四、正式创建项目

1. 创建一个Vue项目，我们随便创建一个空的文件夹在电脑上

2. 创建一个基于 webpack 模板的vue应用程序

   在管理员模式下打开cmd

   # 这里的 myvue 是项目名，可以根据自己的需求起名
   vue init webpack myvue
   

   1. 接下来一路选择no就行！

      说明：

   • Project name：项目名称，默认 回车 即可

   • Project description：项目描述，默认 回车 即可

   • Author：项目作者，默认 回车 即可

   • Install vue-router：是否安装 vue-router ，选择n不安装（后期需要再手动添加）

   • Use ESLint to lint your code：是否使用ESlint做代码检查，选择n不安装（后期需要再手动添加）

   • Set up unit tests：单元测试相关，选择n不安装（后期需要再手动添加）

   • Setup e2e tests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）

   • Should we run npm install for you after the project has been created? (recommended)：创建完成后直接初始化，选择n，我们手动执行；运行结果！

3. 初始化并运行

cd 项目名
npm install #如果不行用淘宝镜像	npm install --registry=http://registry.npm.taobao.org
npm run dev

ctrl+c停止运行

​ 执行完后，目录多了很多依赖

五、IDEA 上配置 Vue 插件

1. 在setting中的plugins安装Vue.js插件
2. 配置HTML支持.vue后缀的文件
3. 配置ECMAScript6

六、扩展

新手一般是在html页面上直接导入vue.js文件来写vue代码