基于vue-cli搭建vue项目开发环境

一、安装vue-cli

    vue-cli是vue的脚手架工具,用于快速搭建vue项目。让开发者只关心项目本身,而不去关注项目的开发环境。
    在安装vue-cli之前,我们先安装webpack,在命令行工具输入下面代码。

npm install --save-dev webpack

安装完成之后输入webpack -v,如果出现相应的版本号,则说明安装成功
    再在命令行工具输入下面的代码,回车即可安装。(报错的可以使用cnpm试试,最后的图片中有提到),这里就默认你安装node.js

npm install -g vue-cli

二、使用vue-cli创建项目

    命令行输入下面的代码开始搭建项目

vue init <template-name> <project-name>

其中的<template-name>是项目模板,<project-name>是你的项目名称
template-name包括:

  • webpack
  • webpack-simple      // 一个简单webpack+vue-loader的模板,不包含其他功能。
  • browserify      // 一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
  • browserify-simple      // 一个简单Browserify+vueify的模板,不包含其他功能。
  • pwa     // 基于webpack模板的vue-cli的PWA模板
  • simple      // 一个最简单的单页应用模板

常用webpack就行了,其他模板我也没用过,感兴趣的自己可以去试试

vue init webpack my-project

我们输入命令后会让用户输入几个选项


 
基于vue-cli搭建vue项目开发环境
 

注意:项目的名称这里不能大写

  • Project name :  项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写。
  • Project description:  项目描述,默认为A Vue.js project,直接回车,不用编写。
  • Author:  作者,如果你有配置git,他会读取.ssh文件中的user。
  • Install vue-router?   是否安装vue的路由插件,Y代表安装,N无需安装,下面的命令也是一样的,稍微大一点的项目一般我们都会用到的。
  • Use ESLint to lint your code?   是否用ESLint来限制你的代码错误和风格。这个可以选NO,不然,提示太多了说很烦。
    setup unit tests with Karma + Mocha?   是否需要安装单元测试工具Karma+Mocha。
  • Setup e2e tests with Nightwatch?  是否安装e2e来进行用户行为模拟测试。
  • Should we run npm install for you after the project has been created?(recommended)npm

  询问你使用npm安装还是yarn安装包依赖,我这里选择的是npmyarn更快更好,使用yarn之前确保你的电脑已经安装yarn

三、运行项目

    项目搭建完成后,我们需要进入项目跟目录中初始化项目,cd进项目跟目录,输入npm i。

npm i

项目初始化完成后就会在跟目录中多一个node-modules文件夹,这里面放了项目中用到的依赖。
我们来看一下项目目录

 
基于vue-cli搭建vue项目开发环境
 

接下来我们的操作一般都在src文件夹中,其他的文件中有一些配置,配置好了就不用去关心,我简单说下这几个重要的文件夹

assets   这个文件夹中存放一些资源,比如我们需要的css样式文件,字体文件,JS文件一般都放在这个文件夹里面
component   这个文件夹是放组件的文件夹,就是相当于是项目中的每个小项目的文件放的是.vue文件
router   是存放路由文件夹,里面有个.js文件,用来配置路由,
App.vue  相当于是我们的整个项目的一个汇总文件。
main.js   页面的入口文件,所有用到的文件都需要在这里面导入,最终渲染到页面。
另外还有两个配置文件build文件下的webpack.base.conf.js和package.json,这两个进行项目的一些其他配置,

运行下面命令(工具安装完成后,其他命令都是在项目的跟目录下运行的)

npm run dev

这样我们的项目就可以跑起来
在浏览输入http://localhost:8080就可以看到默认的项目了,

 
基于vue-cli搭建vue项目开发环境
 

项目搭建就说到这里了,接下来我说一下我在搭建和运行中的一些问题,

四、总结

1、关于mint-ui

    我在项目开发中用到mint-ui组件和mui库,mint-ui是需要安装依赖的,大家可以去官网看看API文档,

cnpm  install mint-ui --save-dev

依赖安装完成后,如果要样式生效的话,还需要导入样式文件,但是。我们为了避免导入样式文件的话我们还需要安装babel-plugin-component 插件,

cnpm install babel-plugin-component -D

安装完babel-plugin-component 插件后,还需要在.babelrc文件中进行配置,即是在plugins属性后面添加

["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]

这样ming-ui样式才能生效

2、关于mui

    在使用mui过程中,mui就想是bootstrap一样,需要引入样式文件,这里需要注意的,样式文件不只是css文件,还需要一些字体文件,但是字体文件并不需要导入到项目,我大胆猜测,应该是css文件中引入了字体文件,用的路径是基于css文件的,所以我们在使用mui时一定要将css文件和fonts文件一并放入到项目中

3、关于css样式

    在导入公共样式的时候,如果用的是scss的话是需要安装依赖的

cnpm i scss-loader -D

安装完成后,打开webpack.config.js 配置这个文件,在module节点里面的rules属性,这个属性是个数组,存放所有第三方的匹配和处理规则。

这是我们在项目中遇到的一些问题,希望对大家有所帮助,这么一总结感觉没什么太大问题了, 我们在网上看到了一张vue-cli的图总结得很不错,我加了一些东西在上面。综上所述全凭个人理解总结,若表述有误,还望各位及时告知,以免混淆。

 
基于vue-cli搭建vue项目开发环境


作者:Guido_van_zijef
链接:https://www.jianshu.com/p/8ff0d5bff231
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关推荐