vue项目框架的构建
vue项目框架的构建对于使用vue作为前端开发框架的复杂项目来说，vue框架的构建非常重要。 框架良好的引用技术很全面，可以为以后的开发维护节省很多时间和精力。
安装node.js需要先安装node环境，可以直接将安装包下载到中文官网http://nodejs.cn/。
安装完成后，可以在命令行工具中输入node -v和npm -v。 如果显示版本号，则安装成功。
如果项目使用世界上最成熟、稳定且功能强大的CSS扩展语言Sass，则必须安装cnpm。
1 .改变现有环境变量
)1)组成npm的全局模块的存储路径和缓存路径。 例如，如果两个文件夹位于NodeJS的主目录中，请在NodeJS下创建' node_global '和' node_cache '两个文件夹，然后输入以下命令更改npm的配置
npmconfigsetprefix“d :program filesnodejsnode _ global”
npmconfigsetcache“d :program filesnodejsnode _ cache”
)2)将NODE_PATH系统变量添加到系统环境变量中，并输入路径d :program filesnodejsnode _ global _ node _ modules。 然后，安装的模块将安装在更改路径下
)3)尝试通过在命令行中输入以下命令来安装express (注意：“-g”参数位于global目录中，即上面设置的“d :program filesnodess”) ）
npm install express -g
安装完成后，您将看到.node _ globalnode _ modulesexpress中已经有内容
)4)在命令行中输入node进入编辑模式，输入以下代码测试能否成功加载模块：
require (‘express’)。
假设成功了，就知道有输出。 假设有错误，检查NODE_PATH的路径。
2 .安装淘宝NPM(cnpm )
(1)输入以下命令
NPM install-gcn pm---- registry=https://registry.NPM.Tao Bao.org
)2) cnpm -v输入是否正常，这里一定会发生错误。
cnpm -v
(3)添加系统变量path的内容
因为cnpm安装在d :program filesnodejsnode _ 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配置//thevuebuildversiontoloadwiththeimportcommand
//(runtime-onlyorStandalone ) hasbeensetinwebpack.base.confwithanalias。
importvuefrom
importappfrom‘./app’
importrouterfrom‘./router
//引入格式css。 浏览器兼容性
import‘normalize.CSS/normalize.CSS’
引入元素用户界面
导入元素- ui
import ' element-ui/lib/theme-chalk/index.CSS '
import‘./static/CSS/index.CSS’
//手机触摸屏
//importvuetouchfrom‘vue-touch’
引入lib-flexible手机窗口时
//import‘Li B-flexible’
//挂在接口上
importapifrom‘@/API/API’
//全局注册组件
importupperfirstfrom‘lo dash/upper first’
import无私的长颈鹿from ‘lodash/无私的长颈鹿’
constrequirecomponent=require.context (
//其组件目录的相对路径
‘@/components /’，
//是否检查其子目录
false、
//匹配基本组件文件名的正则表达式
/base[a-z]w.(vue|js ) katex parse error : got function ' (.' withnoargumentsassuperscriptatposition 2403360 .
）
）
//全局注册组件
Vue.component (
组件名称，
//如果此组件选项是通过export default导出的
//那么就优先使用. default，
//否则返回使用模块的路线。
组件配置. default||组件配置
）
() )
//vue.use(vuetouch，{ name :‘v-touch’} )
vue.use(elementui ) )。
Vue.prototype.$api=api
Vue.config.productionTip=false
/* eslint-disable no-new */
newvue({
El :‘# APP’，
劳特，
组件： { app }，
template :’
() )