Vue创建脚手架

Vue系列文章目录

第一章：Vue基础知识笔记（模板语法、数据绑定、事件处理、计算属性）（一）
第二章：Vue基础知识（计算属性、监视属性、computed和watch之间的区别、绑定样式）（二）
第三章：Vue基础知识（条件渲染、列表渲染、收集表单数据、过滤器）（三）
第四章：Vue基础知识（内置指令、自定义指令、Vue生命周期）（四）
第五章：Vue基础知识之组件机制（非单文件组件、单文件组件）（五）
第七章：Vue使用脚手架（ref、props、mixin、插件、scoped）（七）
第八章：Vue组件通信（组件的自定义事件、全局事件总线、消息订阅与发布、插槽、props）（八）
第九章：Vue使用脚手架（nextTick、Vue封装的过度与动画、vue脚手架配置代理）（九）
第十章：Vuex（十）
第十一章：vue-router（基本使用、路由重定向、多级路由、路由命名、路由的query和params参数、路由的props配置）（十一）
第十二章：vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
第十三章：Vue组件通信二&数据同步（v-model、属性修饰符.sync、$attrs与$listeners、refs.$children与refs.$parent、provide与inject ）（十三）

---

---

使用npm安装vue脚手架，首先得有得安装有npm（包管理工具） ，官网下载安装最新node.js后，就会自带npm（包管理工具）

一、搭建安装环境

Win+R输入cmd打开终端

1、输入node-v查看node版本

2、输入npm-v查看npm版本（如果想升级最新版本 npm install -g npm）

如果没有，就自己百度下node，这里就不教了

3.下载淘宝镜像这个是国内的比npm要快！

npm install -g cnpm --registry=https://registry.npmmirror.com/
1

二、安装环境准备好后，接下来就开始使用vue-cli来构建项目

cmd中输入以下命令
1.cnpm install vue-cli -g 全局安装vue-cli
2.在自己想建项目的文件夹路径栏中输入cmd

cmd目录切换到该目录

接下来进入正题

3.输入vue create 项目名称创建脚手架项目

最后一项看需求，需要就选y不需要就选n

4.运行项目


运行成功

三、模板项目的结构

四、vue.config.js配置文件

1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
2. 使用vue.config.js可以对脚手架进行个性化定制，详情见： https://cli.vuejs.org/zh
3. 在项目根目录下创建vue.config.js并在文件中写入配置需求

代码示例：

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
  lintOnSave:false, //关闭语法检查
}
1
2
3
4
5
6
7
8
9