先點這里(～￣▽￣)～
環境搭建
默認你已經安裝了node.js
下面安裝vue和webpack
npm install -g @vue/cli npm install -g @vue/cli-init npm install -g webpack npm install -g webpack-cli
webpack-simple方式
下面找到你的工程根目錄，開始創建一個工程
Microsoft Windows [版本 6.1.7601] 版權所有 (c) 2009 Microsoft Corporation。保留所有權利。 F:\WebstormProjects>vue init webpack-simple my_test ? Project name my_test ? Project description A Vue.js project ? Author admin ? License MIT ? Use sass? Yes vue-cli · Generated "my_test". To get started: cd my_test npm install npm run dev
按照提示，下面進行初始化
F:\WebstormProjects>cd my_test F:\WebstormProjects\my_test>npm install npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Bro wserslist >3.0 config used in other tools. > node-sass@4.9.3 install F:\WebstormProjects\my_test\node_modules\node-sass > node scripts/install.js Cached binary found at d:\Users\001977\Application Data\npm-cache\node-sass\4.9. 3\win32-x64-57_binding.node > uglifyjs-webpack-plugin@0.4.6 postinstall F:\WebstormProjects\my_test\node_mod ules\uglifyjs-webpack-plugin > node lib/post_install.js > node-sass@4.9.3 postinstall F:\WebstormProjects\my_test\node_modules\node-sass > node scripts/build.js Binary found at F:\WebstormProjects\my_test\node_modules\node-sass\vendor\win32- x64-57\binding.node Testing binary Binary is fine npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fse vents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"} ) added 879 packages in 101.204s F:\WebstormProjects\my_test>npm run dev > my_test@1.0.0 dev F:\WebstormProjects\my_test > cross-env NODE_ENV=development webpack-dev-server --open --hot Project is running at http://localhost:8080/ webpack output is served from /dist/ 404s will fallback to /index.html
最后訪問
用Webstorm打開，工程目錄如下
需要vue-router的話
npm install vue-router --save
這種方式我添加element后，啟動失敗，所以我放棄了這種方法
F:\WebstormProjects\my_test>vue add element � Installing vue-cli-plugin-element... + vue-cli-plugin-element@1.0.0 added 1 package in 11.909s ✔ Successfully installed plugin: vue-cli-plugin-element ? How do you want to import Element? Fully import ? Do you wish to overwrite Element's SCSS variables? Yes ? Choose the locale you want to load zh-CN WARN conflicting versions for project dependency "sass-loader": - ^6.0.6 injected by generator "undefined" - ^7.0.3 injected by generator "vue-cli-plugin-element" Using newer version (^7.0.3), but this may cause build errors. � Invoking generator for vue-cli-plugin-element... � Installing additional dependencies... updated 4 packages in 12.277s ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-element
好像是什么字體錯了
webpack方式
Microsoft Windows [版本 6.1.7601] 版權所有 (c) 2009 Microsoft Corporation。保留所有權利。 F:\WebstormProjects>vue init webpack my_hello ? Project name my_hello ? Project description A Vue.js project ? Author admin ? Vue build (Use arrow keys) ? 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_hello". # Installing project dependencies ... # ======================== npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features! npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0 npm WARN deprecated @types/commander@2.12.2: This is a stub types definition for commander (https://github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/commander installed! > chromedriver@2.41.0 install F:\WebstormProjects\my_hello\node_modules\chromedriver > node install.js Downloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_win32.zip Saving to C:\Users\XXX\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
對，我卡在這里不動了，但是我發現你終止的話也沒啥影響（之所以不動是因為連接不上啊，國外的網址）。
后來發現：出現這個是因為選擇了e2e，只要你不選擇e2e，就不會出現這個
然后添加elementUI組件
F:\WebstormProjects\my_hello>vue add element � Installing vue-cli-plugin-element... + vue-cli-plugin-element@1.0.0 added 1 package in 23.093s ✔ Successfully installed plugin: vue-cli-plugin-element ? How do you want to import Element? Fully import ? Do you wish to overwrite Element's SCSS variables? Yes ? Choose the locale you want to load zh-CN � Invoking generator for vue-cli-plugin-element... � Installing additional dependencies... > node-sass@4.9.3 install F:\WebstormProjects\my_hello\node_modules\node-sass > node scripts/install.js Cached binary found at d:\Users\001977\Application Data\npm-cache\node-sass\4.9. 3\win32-x64-57_binding.node > node-sass@4.9.3 postinstall F:\WebstormProjects\my_hello\node_modules\node-sas s > node scripts/build.js Binary found at F:\WebstormProjects\my_hello\node_modules\node-sass\vendor\win32 -x64-57\binding.node Testing binary Binary is fine added 68 packages in 29.571s ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-element
用Webstorm打開項目
..啟動項目
..
..
..
..
后來發現
不設置e2e測試【Setup e2e tests with Nightwatch? No】,,,跑過去了
..
執行最后那兩句話：
可以訪問頁面
用Webstorm打開查看目錄
最后的摸索
更新npm
npm install npm@latest -g
下面關於webpack
所以說，webpack最好不要全局安裝。
而這僅僅用於手動安裝
我把項目全部放在F:\WebstormProjects
在這個目錄下新建一個文件夾用來存放項目，比如test
進入這個目錄，先執行npm init 來生成package.json文件，一路回車即可
Microsoft Windows [版本 6.1.7601] 版權所有 (c) 2009 Microsoft Corporation。保留所有權利。 F:\WebstormProjects\test>npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (test) version: (1.0.0) description: demo entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to F:\WebstormProjects\test\package.json: { "name": "test", "version": "1.0.0", "description": "demo", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes) F:\WebstormProjects\test>
你會發現生成了一個json文件，但是你要修改其中的scripts
..
"scripts": { "build": "node build/build.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev" }
..然后執行下面兩句話【在F:\WebstormProjects\test路徑下】
npm install --save-dev webpack npm install --save-dev webpack-cli
..
..目錄下又多了兩個東西
..最后安裝vue和ElementUI
npm install vue npm i element-ui -S
你以為這就完了？不！還有很多！比我后端搞個東西還要復雜，我只是告訴你這些命令都是用於手動安裝的。
終極版-以后搭建都用它
先介紹一下vue的cli
..
..
所以，到這里，我們第一步需要安裝cli工具
npm install -g @vue/cli-init
然后創建webpack工程
..
..最后安裝elementUI
..啟動
npm run dev
..
.
..查看工程目錄，你可以用webstorm來打開
完