【非专业前端】使用vue2.5.17+element2.4.5

时间:2023-03-08 17:18:31
【非专业前端】使用vue2.5.17+element2.4.5

开发工具:WebStorm

先搞好环境

【非专业前端】使用vue2.5.17+element2.4.5

可以看出,想安装@vue/cli需要node.js。先去下载安装好。

然后安装@vue/cli

npm install -g @vue/cli
npm install -g @vue/cli-init

安装webpack

npm install -g webpack
npm install -g webpack-cli

查看版本

C:\Windows\System32>node --version
v8.11.1 C:\Windows\System32>vue --version
3.0.1 C:\Windows\System32>webpack -v
4.17.1

建立工程

F:\WebstormProjects>vue create my_vue

Vue CLI v3.0.1
? Please pick a preset: default (babel, eslint) Vue CLI v3.0.1
✨ Creating project in F:\WebstormProjects\my_vue.
� Initializing git repository...
⚙ Installing CLI plugins. This might take a while... > yorkie@2.0. install F:\WebstormProjects\my_vue\node_modules\yorkie
> node bin/install.js setting up Git hooks
done added packages in .367s
� Invoking generators...
� Installing additional dependencies... added packages in .789s
⚓ Running completion hooks... � Generating README.md... � Successfully created project my_vue.
� Get started with the following commands: $ cd my_vue
$ npm run serve
F:\WebstormProjects>cd my_vue F:\WebstormProjects\my_vue>vue add element � Installing vue-cli-plugin-element... + vue-cli-plugin-element@1.0.
added package in .764s
✔ 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_vue\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_vue\node_modules\node-sass
> node scripts/build.js Binary found at F:\WebstormProjects\my_vue\node_modules\node-sass\vendor\win32-x
-\binding.node
Testing binary
Binary is fine
added packages in .947s
⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-element
The following files have been updated / added: src/element-variables.scss
src/plugins/element.js
package-lock.json
package.json
src/App.vue
src/main.js You should review these changes with git diff and commit them. F:\WebstormProjects\my_vue>

最后运行:

 $ cd my_vue
$ npm run serve

..

【非专业前端】使用vue2.5.17+element2.4.5

..

http://localhost:8080/

【非专业前端】使用vue2.5.17+element2.4.5

..

用Webstorm打开我们刚才新建的工程

..

右键package.json

【非专业前端】使用vue2.5.17+element2.4.5

..

双击即可启动项目

【非专业前端】使用vue2.5.17+element2.4.5

..

也可以成功启动,浏览器也可以访问

查看package.json

【非专业前端】使用vue2.5.17+element2.4.5