目錄
創建工程
注意: 命令行都要使用管理員模式運行
創建一個名為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>
安裝依賴: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
package.json
{
"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"
]
}
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 為該命令的縮寫
創建登錄頁面
先把沒用的初始化創建的文件刪除
在源碼目錄中創建如下結構
assets:用於存放資源文件
components:用於存放Vue功能組件
views:用於存放Vue視圖組件
router:用於存放vue-router配置
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