VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript教程 >
  • 130_Vue实战:vue+elementUI

创建工程

注意: 命令行都要使用管理员模式运行

创建一个名为hello-vue的工程

vue init webpack hello-vue
D:\code\vue>vue init webpack hello-vue

? Project name hello-vue
? Project description A Vue.js project
? Author wl3pbzhyq <wl3pbzhyq@163.com>
? Vue build (Use arrow keys)
? 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



D:\code\vue>

image.png
image.png

安装依赖:vue-router、element-ui、sass-loader、node-sass四个插件

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

D:\code\vue>cd hello-vue

D:\code\vue\hello-vue>cnpm install vue-router --save-dev
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 3s(network 2s), speed 8.81KB/s, json 1(21.9KB), tarball 0B)

D:\code\vue\hello-vue>cnpm i element-ui -S
√ Installed 1 packages
√ Linked 11 latest versions
[1/1] scripts.postinstall element-ui@2.15.6 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 run "node -e \"try{require('./po
stinstall')}catch(e){}\"", root: "D:\\code\\vue\\hello-vue\\node_modules\\_core-js@2.6.12@core-js"
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 -)

[1/1] scripts.postinstall element-ui@2.15.6 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 finished in 1s
√ Run 1 scripts
deprecate element-ui@2.15.6 › async-validator@1.8.5 › babel-runtime@6.26.0 › core-js@^2.4.0 core-js@<3.3 is no longer maintained and not rec
ommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slow
down up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
√ All packages installed (11 packages installed from npm registry, used 2m(network 2m), speed 14.02KB/s, json 11(103KB), tarball 1.48MB)

D:\code\vue\hello-vue>cnpm install
√ Installed 38 packages
√ Linked 798 latest versions
[1/2] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "D:\\code\\vue\\hello-vue\\node_mod
ules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

[1/2] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 725ms
[2/2] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\\code\\vue\\hello-vue\\n
ode_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[2/2] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 544ms
√ Run 2 scripts
deprecate html-webpack-plugin@^2.30.1 out of support
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate webpack-dev-server@2.11.5 › chokidar@^2.1.2 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate uglifyjs-webpack-plugin@1.3.0 › uglify-es@^3.3.4 support for ECMAScript is superseded by `uglify-js` as of v3.13.0
deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › browserslist@^1.5.2 Browserslist 2 could fail on reading Browser
slist >3.0 config used in other tools.
deprecate vue-loader@13.7.3 › postcss-selector-parser@2.2.3 › flatten@^1.0.2 flatten is deprecated in favor of utility frameworks such as lo
dash.
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see h
ttps://github.com/lydell/urix#deprecated
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https
://github.com/lydell/resolve-url#deprecated
deprecate webpack-dev-server@2.11.5 › sockjs@0.3.19 › uuid@^3.0.1 Please upgrade  to version 7 or higher.  Older versions may use Math.rando
m() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-svgo@2.1.6 › svgo@^0.7.0 This SVGO version is no longer supported. Upgrade to v2.x.x
.
deprecate optimize-css-assets-webpack-plugin@3.2.1 › cssnano@4.1.11 › cssnano-preset-default@4.0.8 › postcss-svgo@4.0.3 › svgo@^1.0.0 This S
VGO version is no longer supported. Upgrade to v2.x.x.
deprecate webpack@3.12.0 › node-libs-browser@2.2.1 › url@0.11.0 › querystring@0.2.0 The querystring API is considered Legacy. new code shoul
d use the URLSearchParams API instead.
Recently updated (since 2021-11-07): 5 packages (detail see file D:\code\vue\hello-vue\node_modules\.recently_updates.txt)
√ All packages installed (946 packages installed from npm registry, used 3m(network 3m), speed 25.66KB/s, json 799(2.14MB), tarball 1.84MB)


D:\code\vue\hello-vue>cnpm install sass-loader node-sass --save-dev
√ Installed 2 packages
√ Linked 155 latest versions
[1/1] scripts.install node-sass@latest run "node scripts/install.js", root: "D:\\code\\vue\\hello-vue\\node_modules\\_node-sass@6.0.1@node-s
ass"
Downloading binary from https://oss.npmmirror.com/dist/node-sass/v6.0.1/win32-x64-72_binding.node
Download complete
Binary saved to D:\code\vue\hello-vue\node_modules\_node-sass@6.0.1@node-sass\vendor\win32-x64-72\binding.node
Caching binary to C:\Users\Administrator\.npminstall_tarball\node-sass\6.0.1\win32-x64-72_binding.node
[1/1] scripts.install node-sass@latest finished in 3s
[1/1] scripts.postinstall node-sass@latest run "node scripts/build.js", root: "D:\\code\\vue\\hello-vue\\node_modules\\_node-sass@6.0.1@node
-sass"
Binary found at D:\code\vue\hello-vue\node_modules\_node-sass@6.0.1@node-sass\vendor\win32-x64-72\binding.node
Testing binary
Binary is fine
[1/1] scripts.postinstall node-sass@latest finished in 4s
√ Run 1 scripts
peerDependencies WARNING sass-loader@latest requires a peer of fibers@>= 3.1.0 but none was installed
peerDependencies WARNING sass-loader@latest requires a peer of sass@^1.3.0 but none was installed
peerDependencies WARNING sass-loader@latest requires a peer of webpack@^5.0.0 but webpack@3.12.0 was installed
deprecate node-sass@6.0.1 › request@^2.88.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate node-sass@6.0.1 › request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
√ All packages installed (131 packages installed from npm registry, used 42s(network 35s), speed 47.14KB/s, json 156(476.94KB), tarball 1.1
2MB)

D:\code\vue\hello-vue>npm run dev

> hello-vue@1.0.0 dev D:\code\vue\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 32/34 modules 2 active ...x=0!D:\code\vue\hello-vue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as
 { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 11678ms                                                                                             23:35:34


 I  Your application is running here: http://localhost:8080

image.png
image.png
image.png

package.json

image.png

{
  "name": "hello-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "wl3pbzhyq <wl3pbzhyq@163.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "element-ui": "^2.15.6",
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "node-sass": "^6.0.1",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "sass-loader": "^12.3.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-router": "^3.5.3",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

image.png

npm命令解释

  • npm install moduleName:安装模块到项目目录下
  • npm install -g moduleName:-g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm config prefix 的位置
  • npm install -save moduleName:–save 的意思是将模块安装到项目目录下,并在 package 文件的 dependencies 节点写入依赖,-S 为该命令的缩写
  • npm install -save-dev moduleName:–save-dev 的意思是将模块安装到项目目录下,并在 package 文件的 devDependencies 节点写入依赖,-D 为该命令的缩写

创建登录页面

先把没用的初始化创建的文件删除

image.png
image.png
image.png
image.png

在源码目录中创建如下结构

assets:用于存放资源文件

components:用于存放Vue功能组件

views:用于存放Vue视图组件

router:用于存放vue-router配置

image.png

views目录下创建首页视图组件 Main.vue

<template>
  <div>首页</div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

views目录下创建登录视图组件 Login.vue,其中el-...的元素为ElementUI组件

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证,需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面,该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

router目录下创建路由配置文件 index.js

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

配置路由,修改入口代码 main.js


import Vue from 'vue'
import App from './App'

import router from './router'

// 导入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 安装路由
Vue.use(router);

// 安装ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router, // 启用路由
  render: h => h(App) // 启用ElementUI
})

修改App.vue组件代码

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

运行测试

运行报错:Module build failed: TypeError: this.getOptions is not a function

参考文档:https://blog.csdn.net/weixin_43409994/article/details/114632478

PS D:\code\vue\hello-vue> npm run dev

> hello-vue@1.0.0 dev D:\code\vue\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 14% building modules 39/43 modules 4 active ...ode\vue\hello-vue\src\views\Login.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                                                                               22:41:29


 error  in ./src/views/Login.vue

Module build failed: TypeError: this.getOptions is not a function
    at Object.loader (D:\code\vue\hello-vue\node_modules\_sass-loader@12.3.0@sass-loader\dist\index.js:25:24)

 @ ./node_modules/_vue-style-loader@3.1.2@vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader?{"sourceMap":true}!./node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler?{"vue":true,"id":"
data-v-26084dc2","scoped":true,"hasInlineConfig":false}!./node_modules/_sass-loader@12.3.0@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles
&index=0!./src/views/Login.vue 4:14-448 13:3-17:5 14:22-456
 @ ./src/views/Login.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

解决:安装低版本sass-loader

PS D:\code\vue\hello-vue> cnpm install sass-loader@7.3.1 --save-dev
√ Installed 1 packages
√ Linked 10 latest versions
√ Run 0 scripts
√ All packages installed (5 packages installed from npm registry, used 4s(network 4s), speed 35.5KB/s, json 10(137.89KB), tarball 15.28KB)

运行报错:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0

参考文档:https://blog.csdn.net/qq_44624536/article/details/118766318

PS D:\code\vue\hello-vue> npm run dev

> hello-vue@1.0.0 dev D:\code\vue\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 14% building modules 39/45 modules 6 active ...ode\vue\hello-vue\src\views\Login.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                                                                                               22:53:20


 error  in ./src/views/Login.vue

Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getRenderFuncFromSassImpl (D:\code\vue\hello-vue\node_modules\_sass-loader@7.3.1@sass-loader\dist\index.js:165:13)
    at Object.loader (D:\code\vue\hello-vue\node_modules\_sass-loader@7.3.1@sass-loader\dist\index.js:79:18)

 @ ./node_modules/_vue-style-loader@3.1.2@vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader?{"sourceMap":true}!./node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler?{"vue":true,"id":"
data-v-26084dc2","scoped":true,"hasInlineConfig":false}!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&
index=0!./src/views/Login.vue 4:14-447 13:3-17:5 14:22-455
 @ ./src/views/Login.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

解决:修改package.json中sass-loader版本为4.0.0,重新安装依赖cnpm install

"sass-loader": "^4.0.0",
PS D:\code\vue\hello-vue> cnpm install
√ Installed 40 packages
√ Linked 4 latest versions
√ Run 0 scripts
peerDependencies WARNING sass-loader@^4.0.0 requires a peer of node-sass@^3.4.2 || ^4.0.0 but node-sass@6.0.1 was installed
peerDependencies WARNING sass-loader@^4.0.0 requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but webpack@3.12.0 was installed
√ All packages installed (1 packages installed from npm registry, used 4s(network 4s), speed 42.02KB/s, json 6(140.19KB), tarball 10.96KB)
PS D:\code\vue\hello-vue> npm run dev

> hello-vue@1.0.0 dev D:\code\vue\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 14% building modules 37/42 modules 5 active ...ode\vue\hello-vue\src\views\Login.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 24702ms                                                                                                                                                               22:58:06


 I  Your application is running here: http://localhost:8080

运行成功

image.png
image.png

出  处:https://www.cnblogs.com/wl3pb/p/15579873.html

 


相关教程