vue简单创建过程

首先我们要创建vue工程

首先我们要确定自己电脑上是否安装了node环境,打开终端输入 node -v 检测一下，没有安装查找一下资料安装即可；

一、使用npm管理依赖

1、npm install-g cnpm--registry=https://registry.npm.taobao.org 转换到淘宝镜像，因为国外的网速国内使用可能会慢（我没有修改所以下面的语句都是npm,修改之后要使用cnpm）

2、npm install vue-cli -g 全局安装vue-cli 模块

3、vue -V 检查是否安装成功

二、创建项目

1、自己选择个文件或者桌面下创建工程 ：vue init webpack <project name> 这里的 project name是你自己起的名字，例如vue init webpack appDemo；

2、下面是一些配置信息，自己根据实际情况自己决定处理

? Project name  输入项目名称

? Project description 输入项目描述

? Author 作者

? Vue build 打包方式，回车就好了

? Install vue-router?  选择  Y 使用 vue-router，输入 N 不使用

? Use ESLint to lint your code? 代码规范，推荐 N

? Setup unit tests with Karma + Mocha? 单元测试，推荐 N

? Setup e2e tests with Nightwatch? E2E测试，N

3、以上执行完毕后会提示  cd appDemo   npm run dev 这两个语句，可以按照自己终端提示的操作，项目实际已经创建成功。

三、下面我们要引入一些模块

1、引入vux ：

（1）npm install vux --save-dev 

npm install vux --save-dev

   (2) npm install vux-loader --save-dev

npm install vux-loader --save-dev  //官网没提安装这个，但是不安装会报错

   (3) npm install less less-loader --save-dev  这个是为了编译less源码

npm install less less-loader --save-dev

 （4）npm install yaml-loader --save-dev 安装yanl-loader以正确语言文件读取

npm install yaml-loader --save-dev

 （5）打开项目找到build -> webpack.base.conf.js 

    1>在文件中添加const vuxLoader = require('vux-loader')

    2>更改module.exports = {...} ,将module.exports 替换成let webpackConfig = {...}，这里注意{...}字典内的内容是不变的;

    3>在最文件最下面空白处添加

module.exports = vuxLoader.merge(webpackConfig,{

plugins:['vux-ui']

} )；

这样基本上加入完成了，在需要引入的地方这样使用就可以了。

<script>
  import { Group, Cell } from 'vux'
  export default {
    components: {
      Group,
      Cell
    }
  }
</script>

上面有个地方需要注意，在修改webpack.base.conf.js 时候，字典中一个

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

}

}，这里我们需要修改一下，我们引入的是less，所以要把extensions: ['.js', '.vue', '.json']，修改成extensions: ['.js', '.vue', '.json','less']。基本上vux引入就完成完成了。

2、引入vuex

1> npm install vuex --save ，然后就在项目中配置，可以在main.js中配置，但是一般都会创建一个文件来配置然后引入到main.js中。

2>让我们来新建一个store文件夹（这个不是必须的），并在文件夹下新建index.js文件，将下列代码赋值进入：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state:{

},

mutations:{

},

actions:{

},

modules:{

}

})，

然后在main.js中引入红色部分

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store' //添加vuex

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

}) 基本上引入既可以了。

3、引入axios 进行网络请求

npm install --save axios vue-axios 在main.js中引入

import axios from 'axios'
import qs from 'qs'
import VueAxios from 'vue-axios'

Vue.prototype.qs = qs

Vue.use(VueAxios,axios);

，具体写法及相关的一些配置或者引入这里不具体写了，网上很多文章，主要是这里考虑要封装自己，自己决定怎么搞就行

4、移动端点击事件300ms延迟问题要引入fastclick

npm install fastclick -S，在main.js中引入

import FastClick from 'fastclick'

FastClick.attach(document.body);就可以了

一个工程简单的创建几乎完成的，如果是针对某个文件修改相关的一些配置，请具体去网上查找。