1、到官網（http://nodejs.cn/download/）下載Node.JS運行環境并安裝（由于現在的Node中自帶npm包管理器，所有就不需要額外下載npm了）

2、如果是新手，那么建議以引入文件的方式使用vue.js。可以在桌面上新建一個文件夾test，打卡文件夾之后，按住shift再鼠標右擊，打開powershell，輸入npm install vue即可

2、安裝好了之后再安裝vue-cli（腳手架工具），輸入命令：npm install -g vue-cli

3、安裝好了之后再輸入vue list，來查看當前可使用的模板

4、使用vue init webpack sell來安裝項目模板（sell表示你所創建的模板的名字，同項目名即可）

5、安裝好后會有兩個提示cd sell和npm run dev

cd sell 表示進入剛剛創建的目錄。

npm run dev 表示啟動項目：

可以將http://localhost:8080這個url輸入到瀏覽器中進行查看。

?

下面這就是剛剛創建好的項目：

在一級目錄中：

　　build文件夾：webpack的文件相關。

　　node_modules文件夾：通過npm install 安裝的依賴代碼庫。

　　src文件夾：項目存放的代碼。

　　static文件夾：存放第三方靜態資源。（一般會有一個.gitkeep文件：當該目錄為空時，也可以把這個目錄提交到github的代碼倉庫中去）。

　　.babelrc文件：存放babel的一些配置（babel：將ES6的語法編譯成ES5）。

{"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["transform-vue-jsx", "transform-runtime"],"env": {"test": {"presets": ["env", "stage-2"]}} }presets屬性：預設. browsers中，>1%：表示市場份額大于1%。last 2 versions：表示支持每個瀏覽器最后兩個版本。not ie <= 8:支持IE9及以上的瀏覽器。 plugins：表示babel中要用到的插件。transform-runtime：node_modules文件夾內，插件的名字 {"presets": [// babel-preset-env插件，相當于 es2015 ，es2016 ，es2017 及最新版本。以后只需這一個preset就夠了["env", { "modules": false, // 默認為 "commonjs",為false的話則是es6模塊語法"targets": {"browsers": ["> 1%", "last 2 versions", "android 2.3"] // browserslist },"useBuiltIns": true // 如果為 true 且引入了polyfill (import "babel-polyfill"）的話，插件 會根據 targets 的配置，重寫 import "babel-polyfill" ，只引入對應環境必須的 "babel-polyfill" 的子模塊，減少了多余的代碼引入 }]],"plugins": [// babel-plugin-transform-runtime 插件，無全局污染地使用新API，但是不能使用實例方法，建議在開發供他人使用的庫時使用。一般業務情況下使用 babel-polyfill 感覺也沒啥問題，那點污染對開發幾乎無影響"transform-runtime", { // 以下都是默認配置"helpers": true, // 將內聯的語法轉換代碼替換為引用對應模塊，減少重復代碼"polyfill": true, // 使用非全局污染的 polyfill"regenerator": true, // 使用不污染全局作用域的 regenerator 運行時"moduleName": "babel-runtime" // 設置使用helper模塊時的路徑 }] } babel的詳細解釋

更多有關webpack構建工具的信息：https://www.cnblogs.com/tugenhua0707/p/9452471.html

　　editorconfig文件。

root = true[*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true對編譯器的一些配置

　　eslintignore文件。

/build/ /config/ /dist/ /*.js /test/unit/coverage/在build、config、dist等文件夾內的文件，不會使用eslint對其進行js語法檢查

　　eslintrc文件:eslint的配置文件。

// https://eslint.org/docs/user-guide/configuring module.exports = {root: true,parserOptions: {parser: 'babel-eslint'},env: {browser: true,},extends: [// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential', // https://github.com/standard/standard/blob/master/docs/RULES-en.md'standard'],// required to lint *.vue files plugins: ['vue'],// add your custom rules here rules: {// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'//不允許在代碼中使用debugger } }

　　gitignore文件：讓git忽略掉這些文件和目錄。

.DS_Store node_modules/ /dist/ npm-debug.log* yarn-debug.log* yarn-error.log* /test/unit/coverage/# Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln

　　index.html：項目的入口文件。

　　package.json文件：項目的配置文件。

　　postcssrc.js文件：樣式轉換器，可以根據不同的瀏覽器生成不同的樣式。

　　package-lock.json:鎖定安裝時的包的版本號。

?

?

vue.js 學習：https://vuefe.cn/v2/guide/#起步? ? ?

轉載于:https://www.cnblogs.com/vichin/p/7364128.html

總結

以上是生活随笔為你收集整理的vue.js环境安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。