环境搭建

默认你已经安装了node.js

下面安装vue和webpack

npm install -g @vue/clinpm install -g @vue/cli-initnpm install -g webpacknpm 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_testF:\WebstormProjects\my_test>npm installnpm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.> node-sass@4.9.3 install F:\WebstormProjects\my_test\node_modules\node-sass> node scripts/install.jsCached 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_modules\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.jsBinary found at F:\WebstormProjects\my_test\node_modules\node-sass\vendor\win32-x64-57\binding.nodeTesting binaryBinary is finenpm 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\fsevents):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.204sF:\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 --hotProject 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.0added 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 bumpnpm 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.0npm 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.jsDownloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_win32.zipSaving 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.0added 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.jsCached 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-sass> node scripts/build.jsBinary found at F:\WebstormProjects\my_hello\node_modules\node-sass\vendor\win32-x64-57\binding.nodeTesting binaryBinary is fineadded 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 initThis 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 fieldsand exactly what they do.Use `npm install 
     
      ` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (test)version: (1.0.0)description: demoentry 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 webpacknpm install --save-dev webpack-cli

 ..

..目录下又多了两个东西

..最后安装vue和ElementUI

npm install vuenpm i element-ui -S

 

你以为这就完了？不！还有很多！比我后端搞个东西还要复杂，我只是告诉你这些命令都是用于手动安装的。

 终极版-以后搭建都用它

先介绍一下vue的cli

..

..

所以，到这里，我们第一步需要安装cli工具

npm install -g @vue/cli-init

 然后创建webpack工程

..

 

..最后安装elementUI

..启动

npm run dev

 

..

.

..查看工程目录，你可以用webstorm来打开

完