先点这里(～￣▽￣)～
环境搭建
默认你已经安装了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来打开
完