您现在的位置:首页 >> 前端 >> 内容

使用vue-cli构建一个项目(搭建教程)

时间:2018/5/28 14:23:42 点击:

  核心提示:一.搭建环境vue-cli是Vue的脚手架工具,在使用vue-cli创建项目之前需要先下载好各种工具,建议使用命令行全局安装(-g)1. node.js2. npm建议安装一个淘宝镜像npm inst...

一.搭建环境

vue-cli是Vue的脚手架工具,在使用vue-cli创建项目之前需要先下载好各种工具,建议使用命令行全局安装(-g)

1. node.js

2. npm

建议安装一个淘宝镜像  npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue-cli

cnpm install vue-cli -g

检查以上各项是否安装成功, node/npm/-v和 vue -V(注意大写) 检测版本号即可

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

二.生成项目

1.首先需要在命令行中进入到项目目录

使用vue-cli构建一个项目(搭建教程)

然后使用 webpack模板创建一个新的vue项目

vue init webpack name  

使用vue-cli构建一个项目(搭建教程)

注意:

Use ESLint to lint your code (Y/n) 这一步选no

选yes的话 ,缩进不规范,分号不需要等等,后期编译项目会报错

2. 进入项目 使用cnpm安装项目依赖

使用vue-cli构建一个项目(搭建教程)进入项目

 然后 cnpm install    安装依赖

3.启动项目 npm run dev

使用vue-cli构建一个项目(搭建教程)

4.项目打包 npm run build

会生成dist文件夹

5. 使用hbuilder在手机上运行项目

如果要在手机上运行 需要将config->index.js 中

assetsPublicPath:'/' 的路径改为assetsPublicPath:'./'

使用vue-cli构建一个项目(搭建教程)

注意: 共有2处,只需要修改build中的,这样页面就不会出现空白的情况

注:在css中引入的图片可能会存在404的情况,只需要在build->utils中加入

publicPath: '../../'
if (options.extract) {  
      return ExtractTextPlugin.extract({  
        use: loaders,  
        fallback: 'vue-style-loader',  
        publicPath: '../../'  
      })  
    } else {  
      return ['vue-style-loader'].concat(loaders)  
    }  

在hbuilder中打开项目的dist文件夹,并将其转化为移动APP,选择运行->真机运行即可。

使用vue-cli构建一个项目(搭建教程)

注意:如果vue做移动端适配

还需要配置以下工具:

一:px2rem

1.借助px2rem 插件将px单位转为rem

cnpm i lib-flexible --save-dev  
cnpm i px2rem-loader --save-dev 

2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3、在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }    

注意:remUnit: 75 为设计稿大小,可根据实际情况改变。重启后,在组件中直接用px单位,在浏览器中会自动转变为rem。

同时,在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader] //px转换成rem
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
}

4.重启项目 你会发现px转换成了rem

二:scss配置

1.安装

cnpm install --save-dev node-sass
//sass-loader依赖于node-sass
cnpm install --save-dev sass-loader

安装好sass之后,想要在组件中使用全局变量

npm i sass-resources-loader --save-dev

2.如果需要在vue文件style标签使用scss的话,需要声明一下:

Tags:使用 用V VU UE 
作者:网络 来源:Lian_Wu的博客