创建一个vue 项目

npm - v

    //安装vue脚手架
    npm install vue - cli - g

    vue init webpack

    //安装组件
    npm i vant - s //安装组件 
    npm i element - ui - S //安装组件 



    //ui组件 按需加载
    1, 安装插件 cnpm i babel - plugin -
        import --save - dev

    2, 修改.babelrc文件, 在plugins节点下, 添加下面这个配置项:

    {

        "plugins": [
            [
                "component",
                {
                    "libraryName": "element-ui",
                    "styleLibraryName": "theme-chalk"
                }
            ]
        ]

    }

    //安装淘宝镜像  cnpm - v 如果有出现版本号证明安装成功
    npm install - g cnpm--registry = https: //registry.npm.taobao.org



    //安装scss
    //1.安装scss
    npm install node - sass sass - loader - D
    //2. webpack.base.conf.js文件
    module: {
        { //手动添加这一条,相当于是编译识别sass!
            test: /\.scss$/,
            loaders: ["style", "css", "sass"]
        }
    }
    //3.在 .vue文件里使用
    <style scoped lang="scss">
     .box{
     width: 100%; :hover{  color: red;  }
     }
    </style>

    //     踩坑一:(Module build failed: TypeError: this.getOptions is not a function ) 
    // 这个问题主要是因为node-loader版本过高导致的问题,我们尝试将版本降低到@7.3.1, 
    // 直接使用命令:
    npm install sass - loader @7 .3 .1--save - dev 降低版本号

    // 踩坑二:若坑一未解决,并且继续抛出异常(Node Sass version 5.0.0 is incompatible with ^4.0.0)
    // 问题其实指明的很明显了,就是说@5.0.0版本过高了,需要换成@4.x版本的
    // 这里我们降版本到@4.14.1
    npm install node-sass@4.14.1 --save-dev


    //打包后图片找不到问题
    1.webpack.prod.conf.js 在 output 增加: publicPath:"./"

    //有时候把别人的vue 项目clone下来会报错,
    //解决办法(暂时不知道对不对)
    npm remove webpack-dev-server
    npm install webpack-dev-server@2.9.1
    npm run dev

 

上一篇:idea建包层级问题


下一篇:Oracle典型的表连接类型(sort merge join(SMJ) 排序-合并连接、nested loops(NL) 嵌套循环、hash join 哈希连接)