vue-cli 3.0 安装和创建项目教程-博客-网页小功能

vue-cli 3.0 安装和创建项目教程: 原创前端  2019-02-18 19:45:02  浏览：2626

### 一、下载安装vue-cli3
```javascript
npm install -g @vue/cli
// OR
yarn global add @vue/cli
```
如果已经安装之前版本（1.x或2.x）需要先卸载，再安装新的版本。
安装完成后可以通过`vue --version`命令查看版本

### 二、创建一个项目
vue-cli3和之前创建一个项目的命令不同
##### 1、创建项目文件
```javascript
vue create project-name    // vue-cli3
vue init webpack project-name    //vue-cli2
```
##### 2、选择快捷式安装配置
```javascript
? Pleasepick a preset:<Use arrow keys>
> default <babel, eslint> //默认配置
  Manually select features //自定义配置
```
> 建议选择自定义配置

##### 3、自行选择安装配置
```javascript
? Check the features needed for your project:
  <*> Babel //Babel，转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等
  < > TypeScript //TypeScript，新增的选项卡
  < > Progressive Web App <PWA> Support //PWA，模拟原生app，渐进式网络应用程序
  <*> Router //路由
  <*> Vuex //vuex管理模式
  <*> CSS Pre-processors //css预处理语言
> <*> Linter / Formatter //代码规范
  < > Unit Testing //组件单元测试
  < > E2E Testing //端对端测试，模拟用户真实场景
```
> 这个自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定

##### 4、选择css预处理语言
```javascript
? Pick a CSS pre-processor <PostCss, Autoprefixer and CSS Modules are supported

by default>:
  Sass/SCSS <with dart-sass>
> Sass/SCSS <with node-sass>
  Less
  Stylus
```
##### 5、选择代码规范配置
```javascript
? Pick a linter / formatter config: <Use arrow keys>
> EsLint with error prevention only //只进行报错提醒
  EsLint + Airbnb config //不严谨模式
  ESLint + Standard config //正常模式
  ESLint + Prettier //严格模式
```
##### 6、是否保存当前配置信息
```javascript
> to invert selection>
> <*> Lint on save
  < > Lint and fix on commit
```
> 选择第一个，下次创建项目就会有本次的配置出现供你选择

##### 7、选择babel,postcss,eslint配置文件存放位置
```javascript
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?<Use arrow keys>
> In dedicated config files
  In package.json
```
> 第一个方独立文件夹里，第二个放package.json里，建议选第一个

##### 8、填写项目描述
```javascript
? Save this as a preset for future projects? <y/n>
? Save preset as: vue-demo（自己书写）
```
> 然后就开始创建项目，下载依赖
```javascript
Vue CLI v3.4.0
    Creating project in E:\vue-demo.
	Initializing git repository...
	Installign CLI plugins. This might take a while...
[ ...........] / refresh-package-json:is-cli ....
```
等进度条完成，项目就创建好了

```javascript
.
.
.
.
.
    Running Completion hooks...
	
	Generating README.md...
	
	Successfully created project vue-demo.
	Get started with the following commands:
	
$ cd vue-deom
$ npm run serve
```
##### 9、最后我们开始进入项目根目录，运行项目试试

```javascript
cd E:\vue-deom
npm run serve
```
![](http://www.wyxgn.com//uploads/img1/20190218/c7cc068ac934ee56b30a46043723ffe3.png)

![](http://www.wyxgn.com//uploads/img1/20190218/94f1dde9518dc587a956dbd85a97b987.png)

### 三、目录与配置
![](http://www.wyxgn.com//uploads/img1/20190218/afa65c65a4d164c53730156721dc26ca.png)
> 项目创建完成，是没有配置文件 `vue.config.js` 的，这个是自己手动添加的。这是一个可选文件，如果存在就会被`@vue/cli-service`自动加载。

这个文件格式应该为：
```javascript
// vue.config.js
module.exports = {
  //  选项...
}
```
> 具体可以查看官方文档 [https://cli.vuejs.org/zh/config/](https://cli.vuejs.org/zh/config/)

##### vue-cli3还给出了多页面的配置选项 `pages`
详细参数样例：
```javascript
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}
```
> 上面是官网给出的代码，其中除了entry之外都是可选的。

##### 多页面样例：
> 在src文件加下新建pages文件夹

![](http://www.wyxgn.com//uploads/img1/20190218/5f57c1fd1c07d035e70750ae8c2f906b.png)

> 里面每个文件夹都是一个单独的页面，里面有对应的js、vue、html文件。其实每一个文件夹就相当于一个单页面应用，写法和单页面相同。

###### 这里只写出index的代码,其他都是类似的。
index.html
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="index"></div>

</body>
</html>
```
index.js
```javascript
import Vue from 'vue'
import App from './index.vue'

Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount('#index');
```
index.vue
```javascript
<template>
    <div>
        <h1>index</h1>
        <a href="view1.html">view1</a>
         
         
         
         
        <a href="view2.html">view2</a>
    </div>
</template>

</style>
```
> 这里注意页面跳转是用的 < a > 链接，因为这是页面之间跳转，而不是路由。
接下来需要在vue.config.js里面进行多页面的配置。

```javascript
//  vue.config.js
const utils  = require('./utils/utils');

module.exports = {
    baseUrl: './',
    pages: {
        index: {
             entry: 'src/pages/index/index.js',
             template: 'src/pages/index/index.html',
             filename: 'index.html',
        },
        view1: {
             entry: 'src/pages/view1/view1.js',
             template: 'src/pages/view1/view1.html',
             filename: 'view1.html',
        },
        view2: {
             entry: 'src/pages/view2/view2.js',
             template: 'src/pages/view2/view2.html',
             filename: 'view2.html',
        },
    }
}
```
这里我只写了三个属性，然后运行项目就好了。

```javascript
npm run serve
```

![](http://www.wyxgn.com//uploads/img1/20190218/6984eeb8cdcac37bfb896f9842750b64.png)

> 之后如果要增加页面就在vue.config.js文件里面的pages选项里面增加就好了，但是如果一个一个的手动增加，感觉麻烦，也容易出错，那就再简单的配置一下自动读取到pages文件夹里面有哪些页面。

###### 1.首先安装glob模块，接下来会用到。
```javascript
npm install glob
```
###### 2.在src同级目录新建utils文件夹，里面新建`utils.js`文件。
```javascript
const glob = require("glob");
const PAGE_PATH = './src/pages';  // 注意是./ 而不是../ 这可能和commen.js的加载有关系

module.exports = {
    getPages: () => {
        
        //  首先得到包含pages文件夹里面符合条件的路径数组
        let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');

//  pages就是vue.config.js里面pages选项的值，是一个对象
        let pages = {};

//  遍历得到的路径数组，从字符串中分割出需要的页面名字
        entryHtml.forEach((filePath) => {
            let fileName = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'));

//  组建pages需要的值
            pages[fileName] = {
                entry: `src/pages/${fileName}/${fileName}.js`,
                template: `src/pages/${fileName}/${fileName}.html`,
                filename: `${fileName}.html`
            }
        });
        return pages;
    }
};
```
###### 3.然后在vue.config.js里面引入
```javascript
//  vue.config.js
const utils  = require('./utils/utils');

module.exports = {
    baseUrl: './',
    pages: utils.getPages()
}
```
> 到这里一个简单的多页面项目就算配置完了。
注：接口请求可以用 `axios`

安装axios
```javascript
npm install axios
```
然后再main.js文件中简单配置
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios'

Vue.prototype.axios = Axios;

new Vue({
    router: router,
    render: h => h(App)
}).$mount('#app');
```

发送请求
> 最后就可以请求数据了，在index.vue文件中的mounted生命周期函数中发送请求

```javascript
mounted() {
  this.axios.get('/api/data.json').then((res) => {
    console.log(res, 'success')
  }).catch((err) => {
    console.log(err, 'error')
  })
}
```

上一篇：: 没有了
下一篇：: vue部署到Nginx服务器上