WIndows10系统搭建Vue.js开发环境

1、Vuejs简介

Vuejs

Vue.js Github

2、Vue.js配置步骤{Nodejs[with npm]->Webpack->Vue}

Nodejs(with npm)------------->Webpack-------------------->Vue

Nodejs

npm

webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源,可以将多种静态资源 js、css、less 转换成一个静态文件，进而减少页面请求。webpack的Github

Vue和Vue实例

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 //查看配置列表信息

        然后在系统变量中新建一个变量名为 **NODE_PATH**的环境变量， 值为**D:\Program Files (x86)\Nodejs\node_modules**         最后编辑用户变量里的Path，将相应npm的路径改为：**D:\Program Files (x86)\Nodejs\node_global**

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 //运行项目

        如果要关闭项目，在cmd窗口按住Ctrl+C后输入Y

3、Vue.js开发工具

        通常大家喜欢采用IntelliJ IDEA作为开发IDE进行项目的开发。
        用IDEA打开刚才新建的your-vue项目，IDEA需要设置node编译器路径和Vue路径，同时安装Nodejs和Vuejs插件即可修改项目。

JetBrains	IDEA
Nodejs插件	Vuejs插件

IDEA打开your-vue项目

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')` // 子组件向父组件提交数据
}