1.简单介绍

1.vuec-li是vue脚手架工具，它可以快速自动化构建vue项目，实现开发到压缩打包
2.版本 vue-cli(2.x)老版本 @vue/cli(4.x)新版本

2.vue-cli(2.x)

1.安装使用步骤
a.全局安装 vue-cli
npm install —global vue-cli
b.创建一个机遇webpack模板的新项目
vue init webpack my-project
c.进入vue项目目录
cd my-project
d.安装项目运行相关依赖
npm install
e.启动项目
npm run dev
2.自动生成的目录介绍

  • build文件夹：构建脚本目录 （打包用的）
  • config文件夹：配置文件，执行文件需要的配置信息 （生产模式和开发模式）
  • node-modules文件夹：依赖的node工具包
  • src文件夹：资源文件（重要文件）
    • assets静态资源文件夹，放css img js之类的资源
    • components文件夹，存放写好的普通组件 组件名首字母大写
    • router 路由配置的js文件夹（决定跳转规则）
    • App.vue 应用组件。所有组件都是在该组件之上运行的，页面级Vue组件
    • main.js 页面主入口Js文件 全局配置文件 所有文件都需在main.js文件完成
  1. 2.x版本vue脚手架安装sass
  • 安装 sass,node-sass,sass-loder,style-loader,style-loader
  • 直接在组件的style标签上边添加lang=’sass’

注意：当使用sass安装时，默认安装的是sass-loader的最新版本，在2.x版本的脚手架中会报错，需要将sass-loader版本降为7.1.0