配置Vue.js开发环境 2020.12.19
1、Vuejs简介
2、Vue.js配置步骤{Nodejs[with npm]->Webpack->Vue}
Nodejs
npm
webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,可以将多种静态资源 js、css、less 转换成一个静态文件,进而减少页面请求。webpack的Github
![]() |
2.1 安装Nodejs并配置npm
Nodejs各版本安装包下载,这里以12.14.0版本为例,首先下载对应Windows10 64位系统的安装包:
安装Nodejs:双击node-v12.14.0-x64.msi安装包,选择好安装目录后,一直点击下一步即可,Nodejs安装成功后会自带npm,下图是安装好Nodejs后文件夹下的内容。
查看系统的环境变量Path,确定Nodejs安装目录(D:\Program Files (x86)\Nodejs**)添加到了Path中。
接下来打开cmd命令行窗口,查看node和npm的版本:node -v
npm -v
由于Nodejs中的npm管理工具默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,但通常为了节省C盘空间,可将npm安装的模块全部移植到Nodejs安装目录下,首先需要在Nodejs安装目录下新建两个文件夹:node_cache和node_global**
接着在cmd窗口下执行以下四行命令:
npm config set prefix "D:\Program Files(x86)\Nodejs\node_global" //配置node的global路径
npm config set cache "D:\Program Files (x86)\Nodejs\node_cache" //配置node的cache路径
npm config set registry https://registry.npm.taobao.org //配置淘宝镜像地址
npm config list //查看配置列表信息
![](https://i-blog.csdnimg.cn/blog_migrate/5e8c26887b090b7dcce053e2e2f5d4d4.png#pic_center)
![](https://i-blog.csdnimg.cn/blog_migrate/686040172ad3e965cf0bed62eb333a5b.png#pic_center)
![](https://i-blog.csdnimg.cn/blog_migrate/1f0225982f7dcc3ea89f66e8b21cdf76.png#pic_center)
2.2 安装webpack
cmd窗口中执行命令安装webpack:npm install webpack -g
,查看webpack版本:npm webpack -v
,也可以在Nodejs安装目录中node_global文件夹下查看webpack。
首先在cmd窗口下查看npm下载地址是否为淘宝镜像: npm config get registry
,查看要安装的vue版本等信息:npm info vue
,查看目前npm安装的包列表:npm list -global
注意此时,默认的模块D:Program Files (x86)\Nodejs\node_modules 目录将会改变为D:Program Files (x86)\Nodejs\node_global\node_modules ,如果直接运行npm install等命令会报错,所以需要增加环境变量NODE_PATH的内容:D:Program Files (x86)\Nodejs\node_global\node_modules
2.3 安装Vue和Vue-cli
现在安装Vue,打开cmd窗口,输入npm install vue -g
和npm install vue-cli -g
后,并在Nodejs\node_global\node_modules\vue下查看。
编辑系统环境变量中的path添加D:Program Files (x86)\Nodejs\node_global,打开cmd窗口输入命令vue -V
查看安装vue的版本信息
利用Vue在F盘workspace目录下新建Vue.js项目,依次输入如下命令后就可以查看your-vue项目文件夹下的内容,打开谷歌浏览器访问http://localhost:8080
vue init webpack your-vue //使用vue-cli新建vue项目
cd your-vue //进入项目根目录
npm run dev //运行项目
![](https://i-blog.csdnimg.cn/blog_migrate/515645592ab09c11796fe4aaae06d7c9.png#pic_center)
![](https://i-blog.csdnimg.cn/blog_migrate/1ac9a7d5774c6b1c6504184302ee00ba.png#pic_center)
![](https://i-blog.csdnimg.cn/blog_migrate/70b0d6ecc2fb4644c93b41356c9970fc.png#pic_center)
如果要关闭项目,在cmd窗口按住Ctrl+C后输入Y
3、Vue.js开发工具
通常大家喜欢采用IntelliJ IDEA作为开发IDE进行项目的开发。
用IDEA打开刚才新建的your-vue项目,IDEA需要设置node编译器路径和Vue路径,同时安装Nodejs和Vuejs插件即可修改项目。
![]() | ![]() |
![]() | ![]() |
![](https://i-blog.csdnimg.cn/blog_migrate/230fc31a9936c0d556f578fabb0bac8e.png#pic_center)
4、Vue项目所支持兼容ES的浏览器历史版本
ECMAScript 2015 (ES6)
ECMAScript 5
5、编写代码小Tip
HelloWorld.vue文件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
<el-button class="primary"></el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
在.vue文件中,主要包含三个部分:
界面布局设计:<template> </template>
JavaScript脚本部分(包括属性和方法)<scripte> </script>
界面中控件样式自定义部分(推荐采用.less语法)<style></style>
在实际的前端开发过程中,可以使用ElementUI库容易上手,如el-button、el-input、el-dialog和el-form等,由于Java前端开发多采用KVP(键值对形式key:value的数组或表格)来传递变量数据的值和属性,因此可以在中间的js部分可采用以下方式监控变量值:
console.log(JSON.stringify(this.updatedialogForm.proList.attributetable))
// 控制台显示表格数据的JSON解析形式
另外在子对话框向父对话框提交数据时,需要emit一下才能生效:
onupdateSubmit () {
... //功能部分
this.$emit('onupdateSubmit')` // 子组件向父组件提交数据
}