搭建vue项目框架

搭建vue项目框架

搭建vue项目框架

在使用vue作为前端开发框架的复杂项目，vue框架的搭建至关重要。框架搭的好引用技术全面，可以为后来开发维护节省很多时间和精力。

安装node.js

首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。
安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。
如果项目中会用到世界上最成熟、稳定和强大的CSS扩展语言Sass，就需要安装cnpm。
1.改变原有的环境变量
(1)配置npm的全局模块的存放路径以及cache的路径，例如两个文件夹放在NodeJS的主目录下，便在NodeJs下建立"node_global"及"node_cache"两个文件夹，输入以下命令改变npm配置。

npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”
(2)在系统环境变量添加系统变量NODE_PATH，输入路径D:\Program Files\nodejs\node_global\node_modules，此后所安装的模块都会安装到改路径下

(3)在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到global目录下，也就是上面说设置的“D:\Program Files\nodejs\node_global”里面。）
npm install express -g
安装完毕后可以看到.\node_global\node_modules\express 已经有内容

(4)在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块：
require(‘express’)
假设成功，可以看到有输出。假设出错，检查NODE_PATH的路径。
2.安装淘宝npm（cnpm）
(1)输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)输入cnpm -v输入是否正常，这里肯定会出错。
cnpm -v
(3)添加系统变量path的内容
因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm;如下图配置

vue-cli的搭建

打开cmd ,敲入命令：
npm install --global vue-cli （–global：全局安装）

vue项目的搭建

打开cmd ,敲入命令：
vue init webpack demo

引入项目所需元素

1.npm i axios --save
2.npm i vue-router --save
3.npm normolize.css --save
4.npm i lodash --save
5.npm i style-loader --save
6.npm i sass-loader --save(安装成功后需要将package.json中的sass-loader版本改为7.0.0)
7.cnpm i node-sass --save(此处用cnpm)
8.npm i file-loader --save
9.npm install element-ui -S

main.js配置

// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
// 引入格式化css。用于浏览器兼容
import ‘normalize.css/normalize.css’
// 引入elementui
import Elementui from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
import ‘./static/css/index.css’
//手机触屏
// import VueTouch from ‘vue-touch’
// 引入lib-flexible 手机 窗口时应
// import ‘lib-flexible’
// 挂在接口
import api from ‘@/api/api’
//全局注册组件
import upperFirst from ‘lodash/upperFirst’
import camelCase from ‘lodash/camelCase’

const requireComponent = require.context(
// 其组件目录的相对路径
‘@/components/’,
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+.(vue|js)KaTeX parse error: Got function '\.' with no arguments as superscript at position 240: …Name.replace(/^\̲.̲\/(.*)\.\w+/, ‘$1’)
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 export default 导出的，
// 那么就会优先使用 .default，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})

// Vue.use(VueTouch, { name: ‘v-touch’ })
Vue.use(Elementui)
Vue.prototype.$api = api
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})