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

Posted 2020-12-17 shujiying

一、安装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

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

 

 

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

• 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安装包依赖，我这里选择的是npm，yarn更快更好，使用yarn之前确保你的电脑已经安装yarn。

三、运行项目

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

npm i

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

 

 

接下来我们的操作一般都在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就可以看到默认的项目了，

 

 

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

 

四、总结

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的图总结得很不错，我加了一些东西在上面。综上所述全凭个人理解总结，若表述有误，还望各位及时告知，以免混淆。

 

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