Front-End（一）：Vue项目构建及运行（Nodejs + IDEA + VScode）

1 Node.js + Vue

1.1 Node.js安装及环境配置

1.1.1 Node.js安装

1）官网下载Node.js，选择需要的版本

2）双击安装文件开始安装Node.js

3）单击下一步

4）选择安装路径

5）用户自定义

6）开始安装

7）结束安装

1.1.2 Node.js环境配置

1）检查npm及node版本，并查看npm安装位置

C:\Users\Administrator>npm -v
6.9.0

C:\Users\Administrator>node -v
v10.16.3

C:\Users\Administrator>where npm
E:\nodejs\npm
E:\nodejs\npm.cmd

2）在nodejs安装目录下新建node_global和node_cache文件夹

3）配置npm的全局模块的存放路径以及cache的路径

C:\Users\Administrator>npm config set prefix "E:\nodejs\node_global"

C:\Users\Administrator>npm config set cache "E:\nodejs\node_cache"

4）新增NODE_PATH系统环境变量，将E:\nodejs\node_global添加到用户变量PATH，且删除其默认路径

1.2 运行Vue项目

1）安装cnpm

C:\Users\Administrator>npm --registry https://registry.npm.taobao.org install cnpm -g
E:\nodejs\node_global\cnpm -> E:\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.0
added 688 packages from 915 contributors in 80.03s

C:\Users\Administrator>cnpm -v
cnpm@6.1.0 (E:\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.12.0 (E:\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.16.3 (E:\nodejs\node.exe)
npminstall@3.23.0 (E:\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\nodejs\node_global
win32 x64 10.0.14393
registry=https://r.npm.taobao.org

2）安装webpack

C:\Users\Administrator>cnpm install webpack -g

3）安装vue-cli

C:\Users\Administrator>cnpm install vue-cli -g

4）创建项目

# 基于webpack模板创建项目
C:\Users\Administrator\Desktop\test>vue init webpack my-project

C:\Users\Administrator\Desktop\test>"node"  "E:\nodejs\node_global\\node_modules\vue-cli\bin\vue" init webpack my-project

? Project name llw
? Project description none
? Author Your Name <you@example.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-project".

To get started:

  cd my-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

5）执行项目

# 进入项目文件
C:\Users\Administrator\Desktop\test>cd my-project

# 安装依赖
C:\Users\Administrator\Desktop\test\my-project>cnpm install
√ Installed 58 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 36ms(network 31ms), speed 0B/s, json 0(0B), tarball 0B)

# 启动运行
C:\Users\Administrator\Desktop\test\my-project>cnpm run dev

> llw@1.0.0 dev C:\Users\Administrator\Desktop\test\my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 23/31 modules 8 active ...ynamicSunshine\my-project\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.                     95% emitting

 DONE  Compiled successfully in 4245ms                                                                                     5:26:34 PM
 I  Your application is running here: http://localhost:8080

2 Intellij IDEA + Vue

2.1 Intellij IDEA配置

1）安装vue.js

2）设置Javascript框架类型

3） 添加*.vue文件类型

4）新建.vue格式文件

<template>
    <div> {{msg}}</div>
</template>

<script>
    export default{ data () { return {msg: 'vue模板页'} } }
</script>

<style></style>

2.2 运行Vue项目

2.2.1 启动模板

# 项目初始化
C:\Users\Administrator\Desktop\demo>vue init webpack llw 

# 进入项目文件
C:\Users\Administrator\Desktop\demo>cd llw

# 启动项目
C:\Users\Administrator\Desktop\demo\llw>cnpm run dev

2.2.2 安装element-ui

1）npm安装

C:\Users\Administrator\Desktop\demo>cd llw

C:\Users\Administrator\Desktop\demo\llw>cnpm i element-ui -S

2）完整引入

// 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';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false


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

3 VScode + Vue

3.1 VScode安装

详见官方文档。

3.2 运行Vue项目

3.2.1 插件安装

注意：eslint并非选择eslint插件后就可直接使用，需进行一定配置：cnpm i eslint eslint-plugin-html eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D

3.2.2 用户设置

1）打开用户设置界面

2）es6语法检测配置

//vscode es6语法检测配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    "eslint.autoFixOnSave": true,
    "explorer.confirmDragAndDrop": false,
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    //"debug.onTaskErrors": "debugAnyway",

3）vue语法检测

// vue语法检测
    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "eslint.alwaysShowStatus": true

3.2.3 创建vue项目

1）进入文件目录

2）选择执行模式

3）结果预览

3.2.4 创建vue模板

1）新建用户代码片段Preference→User Snippets→Vue.json。


2）向Vue.json添加下列内容（根据需要可以进行调整）。

{
	"Print to console": {
	    "prefix": "vue",
	    "body": [
	        "<template>",
	        "  <div class=\"container\">\n",
	        "  </div>",
	        "</template>\n",
	        "<script>",
	        "export default {",
	        "  data() {",
	        "    return {\n",
	        "    }",
	        "  },",
	        "  components: {\n",
	        "  }",
	        "}",
	        "</script>\n",
	        "<style scoped lang=\"scss\">\n",
	        "</style>",
	        "$2"
	    ],
	    "description": "Log output to console"
	}
}

3）模板提示