环境搭建
默认你已经安装了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
对，我卡在这里不动了，但是我发现你终止的话也没啥影响（之所以不动是因为连接不上啊，国外的网址）。
然后添加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打开项目
..启动项目
..
..
..
..
后来发现
不设置单元测试【Set up unit tests No】,,,居然跑过去了。。
..
F:\WebstormProjects>vue init webpack my_he ? Project name my_he ? Project description A Vue.js project ? Author XXX ? 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 No ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recom ? Should we run `npm install` for you after the project has been created? (recom mended) npm vue-cli · Generated "my_he". # Installing project dependencies ... # ======================== npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Br owserslist >3.0 config used in other tools. npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and n ew features! npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Bro wserslist >3.0 config used in other tools. npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas t 2.1.6 to avoid a serious bug with socket data flow and an import issue introdu ced in 2.1.0 > chromedriver@2.41.0 install F:\WebstormProjects\my_he\node_modules\chromedrive r > 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 ----从这里开始跑过去了 Received 781K... Received 1568K... Received 2352K... Received 3136K... Received 3468K total. Extracting zip contents Copying to target path F:\WebstormProjects\my_he\node_modules\chromedriver\lib\c hromedriver Done. ChromeDriver binary available at F:\WebstormProjects\my_he\node_modules\ch romedriver\lib\chromedriver\chromedriver.exe > uglifyjs-webpack-plugin@0.4.6 postinstall F:\WebstormProjects\my_he\node_modul es\webpack\node_modules\uglifyjs-webpack-plugin > node lib/post_install.js 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 1359 packages in 174.998s Running eslint --fix to comply with chosen preset rules... # ======================== > my_he@1.0.0 lint F:\WebstormProjects\my_he > eslint --ext .js,.vue src test/e2e/specs "--fix" # Project initialization finished! # ======================== To get started: cd my_he npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
执行最后那两句话：
可以访问页面
用Webstorm打开查看目录
