vue-cli

Posted 2021-03-22 pengdt

vue-cli是用运行nodejs运行的配合 webpack-cli 和各种 webpack-cli插件 配合完成的，带有npm插件下载，sass编译，less编译，label编译，热加载热更新技术，文件打包功能，请求代理等等功能

正式开始
第一步安装nodeJS和npm，这个查看==nodejs笔记==的《安装nodejs》

vue-cli分为2.x和3.x【脚手架的版本跟vue没关系，vue目前还是2.x】
这里只讲3.x的，后面会补2.x

Vue-cli3.x

## 全局脚手架
npm install -g @vue/cli
## 查看版本
vue --version
## 新建项目
vue create 【name】

babel要，router要，vuex要，其他不需要，也可以都不要，后面自己再安装也行

安装完毕后
如果文件夹里没有==node_modules==这个子文件夹，这个是放需要的插件的，这是需要执行

npm install

从npm仓库去下载插件，下载目录是按文件夹里的==package.json==文件下载的，这个文件非常的重要，打开文件可以看到(2.0和3.0都一样)

• scripts是脚本的意思，也就是执行命令，启动服务，打包文件就是用这个脚本的命令
• dependencies是正式环境的依赖，会被最后打包的插件集合
• devDependencies是开发依赖，打包用不到，但是开发过程需要的插件集合

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": { ... }

npm的安装插件，卸载插件，更新插件的命令需要可以百度，==nodeJs笔记==里也有

然后就可以开始开发了，推荐的开发工具是==webStrom==，可以去==工具==看看

然后引入整个项目后先研究下目录

上面的目录是我们正常开发都需要的文件，除了plugins是我自己添加的外，应该都没有==vue.config.js==这个文件，这个文件是==必备文件==，但是脚手架没有自带需要==自己配置==，百度有大把配置

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    /** 区分打包环境与开发环境
     * process.env.NODE_ENV==='production'  (打包环境)
     * process.env.NODE_ENV==='development' (开发环境)
     */
    // 基本路径
    // vue2.0的本地配置和打包配置是分开的，3.0是合并的，所以要加上三元判断
    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/dist',
    // 输出文件目录
    outputDir: 'dist',
    assetsDir: '',
    lintOnSave: true,
    runtimeCompiler: true, //关键点在这
    // 调整内部的 webpack 配置。
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
    chainWebpack: config => {
        // config.resolve.alias
        //     .set('@', resolve('src'))
        //     .set('@style', resolve('src/assets/style'))
        //     .set('@img', resolve('src/assets/img'))
        //     .set('@components', resolve('src/components'))
    },
    configureWebpack: () => {},
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 4000, // 打开项目的端口号
        https: false,
        hotOnly: false,
        proxy: {
            // 接口代理配置
        },
        before: app => {}
    }
}

// 如果想修改打包文件夹名字，修改两处地方
// publicPath: process.env.NODE_ENV === 'development' ? '/' : '/xx',
// outputDir: 'xx',

然后把项目起起来，在目录的cmd里按照==package.json==里的script里的打开服务器，如果不知道怎么启动，可以打开项目里的==readme.md==这个文件，里面有这么一句Compiles and hot-reloads for development，意思是热加载启动开发环境，复制下面的命令，应该是这句，通过当前文件夹的cmd窗口输入

npm run serve

启动完毕后回车，等一会之后应该有提示网页地址

打开后页面长这样就是开启成功了

vue-cli跟直接引入vue-script代码的写法区别在哪

• vue-cli的代码是写在一个个的vue后缀文件里的，通过webpack去编译的
• vue-cli引入插件就不是用script，用的是==ES6模块化==或者==NodeJS的require==写法
• vue-cli的v-bind绑定文件路径失效

// 可以
<img src="../../assets/logo.png"/>

// 不行
<img :src="url"/>
data {
    url: '../../assets/logo.png'
}

// 得改成这样
<img :src="url"/>
import url from '../../assets/logo.png'
data {
    url,
}

vue-cli的作用是什么
如果说脚手架能实现的功能我用html+srcipt插件也能一样实现，我为什么要用vue-cli

• 脚手架让文件摆放更加规范，从上面的文件夹解读就可以看出来，规范能让维护简单很多
• 通过webpack打包的代码安全性更好，文件经过压缩也更小
• 脚手架还方便调试，因为他自带了代码映射，错误提示，以及热加载热更新
• 脚手架使用路由router更方便，什么是路由查看下一篇笔记