vue脚手架的搭建

脚手架的使用（vue-cli）

1.vue脚手架的安装

查看版本版本号 vue -V

无版本号：没有安装
安装Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
方法①： 打开命令提示块，输入：

npm install -g @vue/cli

方法②：

yarn global add @vue/cli

有版本号：证明已安装，假如版本为1.X或者2.x的版本，则需要更新，3.x或者4.x继续使用即可，无需更新
更新操作：使用npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它，然后进行无版本号的操作。

2.创建项目

新版本的脚手架项目
vue create ‘项目名字’
注意：
1.不要出现中文
2.不能出现特殊符号
3.不能出现大写字母

在3.X或者4.X的版本中webpack的配置被隐藏，若想更改配置则需要则vue.config.js中写
Vue.config.js文件：
2.x的脚手架项目创建
npm install -g @vue/cli-init（只执行1次）
vue init 的运行效果将会跟 vue-cli@2.x 相同
vue init webpack my-project
注：在2.x中的webpack配置没有被隐藏。

3.安装服务器

npm install -g serve

安装完serve可以查看打包好的项目

开启服务器

开启服务器只需要输入 serve ‘文件名称’

即可开启服务器

4.手架中的预编译使用

Sass

npm install -D sass-loader node-sass

Less

npm install -D less-loader less

Stylus

npm install -D stylus-loader stylus

使用方法：

<style lang="scss"  scoped>
$color: red;
</style>

注：scoped的意思是该组件的css只在该组件中起作用

5.脚手架适配 多页面配置

Vue是SPA（Single Page Application）单页面应用 （所有页面都是同一路径，唯一变化就是锚点，不利于seo，但是它也可以配置为多页面应用

多页面配置

配置与vue.config.js文件下

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    // 用于多页配置，默认是 undefined
    pages: {
        index: {
        // 入口文件
        entry: 'src/main.js',　　/*这个是根入口文件*/
        // 模板文件
        template: 'public/index.html',
        // 输出文件
        filename: 'index.html',
        // 页面title
        title: 'Index Page'
        },
        seconde:{
             // 入口文件
        entry: 'src-second/main.js',　　/*这个是根入口文件*/
        // 模板文件
        template: 'public/second.html',
        // 输出文件
        filename: 'second.html',
        // 页面title
        title: 'Second Page'
        },
        // 简写格式
        // 模板文件默认是 `public/subpage.html`
        // 如果不存在，就是 `public/index.html`.
        // 输出文件默认是 `subpage.html`.
        subpage: 'src/main.js'　　　　/*注意这个是*/
    },
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8066,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://localhost:3000/',
                /* 允许跨域 */
                changeOrigin: true,
                /* 路径重写 */
                pathRewrite:{
                    '^/api':''
                }
            },
        },
    },
}

6.移动段配置

安装下载包
npm install -S amfe-flexible

引入包
import ‘amfe-flexible’//适配

Sass中函数：
@function px2rem($px){
@return $px/75 * rem;
}