使用vue-cli进行vue项目的搭建

目录

1.安装nodejs

2.安装淘宝镜像加速器（cnpm）和vue-cli脚手架

 3.搭建vue项目

         3.1 创建vue项目

一路都选择no即可；  说明：

3.2.搭建其他依赖

---

1.安装nodejs

                下载安装nodejs并按提示安装，安装完成后进入cmd运行node -v，显示版本号即为安装成功，如果没有显示就去配置环境变量。

node -v

2.安装淘宝镜像加速器（cnpm）和vue-cli脚手架

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；
  预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

项目的功能

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

#淘宝镜像加速器

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

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

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

 3.搭建vue项目

         3.1 创建vue项目

                1.在电脑中建立vue-study目录，并进入vue-study

                

                 2.以管理员身份运行cmd，并在cmd中打开vue-study        

#打开文件
cd E:\Projects\VueProjects\vue-study
#显示文件
E:

                 3.创建并初始化一个基于webpack模板的vue程序

vue init webpack myvue

一路都选择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不安装（后期需要再手动添加）
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

       4，初始化并运行

cd  vue
npm install
npm run dev

3.2.搭建其他依赖

1.element-ui

Element是饿了么前端开源维护的Vue UI组件库， 组件齐全， 基本涵盖后台所需的所有组件，文档讲解详细， 例子也很丰富。主要用于开发PC端的页面， 是一个质量比较高的Vue UI组件库。

npm install element-ui -S

2.vue router

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5 历史模式或hash模式， 在IE 9中自动降级
自定义的滚动行为

由于我的vue是2.0版本，路由器对应的版本是3.0版本，版本过高会导致下载失败，版本不兼容

#下载3.2.0版本
npm install vue-router@3.2.0  --save-dev