vue简单创建过程

最新推荐文章于 2025-08-06 21:40:18 发布

原创最新推荐文章于 2025-08-06 21:40:18 发布 · 511 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #移动端

H5 同时被 2 个专栏收录

4 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文介绍了Vue移动端项目的创建与模块引入。先检测并安装node环境，使用npm管理依赖，全局安装vue-cli模块，创建项目并完成相关配置。接着引入vux、vuex、axios等模块，还提到解决移动端点击事件300ms延迟问题需引入fastclick。

首先我们要创建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);就可以了

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