1.使用命令行創(chuàng)建一個hello-vue的一個項(xiàng)目

vue init webpack hello-vue

2.然后我們需要安裝依賴桦他，依次安裝你所需要的依賴，這里我們需要下載的有vue-router,element-ui,sass-loader和node-sass四個插件

cd hello-vue    #進(jìn)入項(xiàng)目文件夾
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項(xiàng)目被我們搭建完成

image-20210202214736716.png

5.下面我們用idea打開我們創(chuàng)建的項(xiàng)目嚣崭，然后可以進(jìn)行一些操作了
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">系統(tǒng)登錄</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的時候跳轉(zhuǎn)成功，在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的命令行中啟動項(xiàng)目 npm run dev

111.gif

10.以上就是vue項(xiàng)目的基本環(huán)境的搭建搏讶！