1.使用命令行创建一个hello-vue的一个项目
vue init webpack hello-vue
2.然后我们需要安装依赖，依次安装你所需要的依赖，这里我们需要下载的有vue-router,element-ui,sass-loader和node-sass四个插件
cd hello-vue #进入项目文件夹
npm install vue-router --save-dev #安装vue-router
npm i element-ui -S #安装element-ui
npm install #安装依赖
cnpm install sass-loader node-sass --save-dev #安装sass加载器
npm run dev #启动测试
3.前面两步的效果如下：
C:\Users\黄帅\Desktop>vue init webpack hello-vue
? Project name hello-vue
? Project description A Vue.js project
? Author huangshuai12311 <[email protected]>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
vue-cli · Generated "hello-vue".
# Project initialization finished!
# ========================
To get started:
cd hello-vue
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
C:\Users\黄帅\Desktop>cd hello-vue
C:\Users\黄帅\Desktop\hello-vue>npm install vue-router --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
+ [email protected]
added 1 package from 1 contributor and audited 1 package in 8.828s
found 0 vulnerabilities
C:\Users\黄帅\Desktop\hello-vue>npm i element-ui -S
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
> [email protected] postinstall C:\Users\黄帅\Desktop\hello-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm WARN [email protected] requires a peer of vue@^2.5.17 but none is installed. You must install peer dependencies yourself.
+ [email protected]
added 10 packages from 9 contributors and audited 12 packages in 30.23s
found 0 vulnerabilities
C:\Users\黄帅\Desktop\hello-vue>npm install
npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> [email protected] postinstall C:\Users\黄帅\Desktop\hello-vue\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
> [email protected] postinstall C:\Users\黄帅\Desktop\hello-vue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
added 1264 packages from 675 contributors and audited 1283 packages in 183.969s
37 packages are looking for funding
run `npm fund` for details
found 17 vulnerabilities (3 low, 8 moderate, 6 high)
run `npm audit fix` to fix them, or `npm audit` for details
C:\Users\黄帅\Desktop\hello-vue>cnpm install sass-loader node-sass --save-dev
√ Installed 2 packages
√ Linked 185 latest versions
[1/1] scripts.install node-sass@* run "node scripts/install.js", root: "C:\\Users\\黄帅\\Desktop\\hello-vue\\node_modules\\[email protected]@node-sass"
Downloading binary from https://cdn.npm.taobao.org/dist/node-sass/v5.0.0/win32-x64-72_binding.node
Download complete
Binary saved to C:\Users\黄帅\Desktop\hello-vue\node_modules\[email protected]@node-sass\vendor\win32-x64-72\binding.node
Caching binary to C:\Users\黄帅\.npminstall_tarball\node-sass\5.0.0\win32-x64-72_binding.node
[1/1] scripts.install node-sass@* finished in 2s
[1/1] scripts.postinstall node-sass@* run "node scripts/build.js", root: "C:\\Users\\黄帅\\Desktop\\hello-vue\\node_modules\\[email protected]@node-sass"
Binary found at C:\Users\黄帅\Desktop\hello-vue\node_modules\[email protected]@node-sass\vendor\win32-x64-72\binding.node
Testing binary
Binary is fine
[1/1] scripts.postinstall node-sass@* finished in 532ms
√ Run 1 scripts
peerDependencies link [email protected] in C:\Users\黄帅\Desktop\hello-vue\node_modules\[email protected]@ajv-keywords unmet with C:\Users\黄帅\Desktop\hello-vue\node_modules\ajv(5.5.2)
peerDependencies WARNING sass-loader@* requires a peer of webpack@^4.36.0 || ^5.0.0 but [email protected] was installed
peerDependencies WARNING sass-loader@* requires a peer of sass@^1.3.0 but none was installed
peerDependencies WARNING sass-loader@* requires a peer of fibers@>= 3.1.0 but none was installed
deprecate [email protected] › request@^2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate [email protected] › [email protected] › har-validator@~5.1.3 this library is no longer supported
Recently updated (since 2021-01-26): 1 packages (detail see file C:\Users\黄帅\Desktop\hello-vue\node_modules\.recently_updates.txt)
√ All packages installed (202 packages installed from npm registry, used 14s(network 11s), speed 240.66kB/s, json 188(462.61kB), tarball 2.17MB)
C:\Users\黄帅\Desktop\hello-vue>npm run dev
> [email protected] dev C:\Users\黄帅\Desktop\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
1 1 1 12% building modules 24/29 modules 5 active ...sers\黄帅\Desktop\hello-vue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
1 1 95% emitting
DONE Compiled successfully in 7212ms 21:42:30
I Your application is running here: http://localhost:8080
4.访问http://localhost:8080我们即可以看到一个vue项目被我们搭建完成
image-20210202214736716.png
5.下面我们用idea打开我们创建的项目，然后可以进行一些操作了
6.此刻需要编写一个登陆界面，在src的下新建一个view的目录，然后新建一个view/login.vue
系统登录
记住密码
登录
7.然后我们编写一个路由，用来访问login的时候跳转成功，在src目录下新建一个router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/TheLogin'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
8.然后我们需要在app.vue中修改代码如下
9.然后我们在idea的命令行中启动项目 npm run dev
111.gif
10.以上就是vue项目的基本环境的搭建！