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 <[email protected]>
? 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

> [email protected] 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）模板提示

Front-End（一）：Vue項目構建及運行（Nodejs + IDEA + VScode）

目錄