vue项目的搭建
2021-02-02 本文已影响0人
MrH_永无BUG
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 <2548262291@qq.com>
? 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.
+ vue-router@3.5.1
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 core-js@2.6.12: 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.
> core-js@2.6.12 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 element-ui@2.15.0 requires a peer of vue@^2.5.17 but none is installed. You must install peer dependencies yourself.
+ element-ui@2.15.0
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 extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
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 fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> ejs@2.7.4 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/)
> uglifyjs-webpack-plugin@0.4.6 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 fsevents@2.3.1: 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 fsevents@1.2.13: 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 fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords@3.5.2 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\\_node-sass@5.0.0@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\_node-sass@5.0.0@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\\_node-sass@5.0.0@node-sass"
Binary found at C:\Users\黄帅\Desktop\hello-vue\node_modules\_node-sass@5.0.0@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 ajv@6.12.6 in C:\Users\黄帅\Desktop\hello-vue\node_modules\_ajv-keywords@3.5.2@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 webpack@3.12.0 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 node-sass@5.0.0 › request@^2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate node-sass@5.0.0 › request@2.88.2 › 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
> hello-vue@1.0.0 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
<template>
<div class="login-container">
<el-form :model="ruleForm2" :rules="rules2"
status-icon
ref="ruleForm2"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
<h3 class="title">系统登录</h3>
<el-form-item prop="username">
<el-input type="text"
v-model="ruleForm2.username"
auto-complete="off"
placeholder="用户名"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password"
v-model="ruleForm2.password"
auto-complete="off"
placeholder="密码"
></el-input>
</el-form-item>
<el-checkbox
v-model="checked"
class="rememberme"
>记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
return {
logining: false,
ruleForm2: {
username: 'huangshuai',
password: '123456',
},
rules2: {
username: [{required: true, message: 'please enter your account', trigger: 'blur'}],
password: [{required: true, message: 'enter your password', trigger: 'blur'}]
},
checked: false
}
},
methods: {
handleSubmit(event){
this.$refs.ruleForm2.validate((valid) => {
if(valid){
this.logining = true;
if(this.ruleForm2.username === 'admin' &&
this.ruleForm2.password === '123456'){
this.logining = false;
sessionStorage.setItem('user', this.ruleForm2.username);
this.$router.push({path: '/'});
}else{
this.logining = false;
this.$alert('username or password wrong!', 'info', {
confirmButtonText: 'ok'
})
}
}else{
console.log('error submit!');
return false;
}
})
}
}
};
</script>
<style scoped>
.login-container {
width: 100%;
height: 100%;
}
.login-page {
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
margin: 0px 0px 15px;
text-align: left;
}
</style>
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中修改代码如下
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
9.然后我们在idea的命令行中启动项目 npm run dev
111.gif
10.以上就是vue项目的基本环境的搭建！
