【非专业前端】vue+element+webpack

先点这里(～￣▽￣)～

环境搭建

默认你已经安装了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.]
版权所有 (c)  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.: Browserslist  could fail on reading Bro
wserslist >3.0 config used in other tools.

> node-sass@4.9. install F:\WebstormProjects\my_test\node_modules\node-sass
> node scripts/install.js

Cached binary found at d:\Users\\Application Data\npm-cache\node-sass\4.9.
\win32-x64-57_binding.node

> uglifyjs-webpack-plugin@0.4. postinstall F:\WebstormProjects\my_test\node_mod
ules\uglifyjs-webpack-plugin
> node lib/post_install.js

> node-sass@4.9. 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-\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. (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

added  packages in .204s

F:\WebstormProjects\my_test>npm run dev

> my_test@1.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.
added  package in .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. injected by generator "undefined"
- ^7.0. injected by generator "vue-cli-plugin-element"

Using newer version (^7.0.), but this may cause build errors.

�  Invoking generator for vue-cli-plugin-element...
�  Installing additional dependencies...

updated  packages in .277s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-element

好像是什么字体错了

webpack方式

Microsoft Windows [版本 6.1.]
版权所有 (c)  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.: Browserslist  could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.: Browserslist  could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated istanbul-lib-hook@1.2.: 1.2. should have been a major version bump
npm WARN deprecated socks@1.1.: If using .x branch, please upgrade to at least 2.1. to avoid a serious bug with socket data flow and an import issue introduced in 2.1.
npm WARN deprecated @types/commander@2.12.: 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. 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.
added  package in .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. install F:\WebstormProjects\my_hello\node_modules\node-sass
> node scripts/install.js

Cached binary found at d:\Users\\Application Data\npm-cache\node-sass\4.9.
\win32-x64-57_binding.node

> node-sass@4.9. 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-\binding.node
Testing binary
Binary is fine
added  packages in .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.]
版权所有 (c)  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.)
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来打开

完