作者:111 | 来源:互联网 | 2023-08-29 09:00
前情提要:多看一眼1.涉及有关的组件安装为了防止运行出错可以使用我的版本2.记得要安装了淘宝的镜像加速器(cnpm)组件才可以使用cnpm指令※※※※※※※※※※留心版本,我
前情提要: 多看一眼 1.涉及有关的组件安装为了防止运行出错可以使用我@的版本 2.记得要安装了淘宝的镜像加速器(cnpm)组件才可以使用cnpm指令 ※※※※※※※※※※
留心版本,我试过都用最新版,发现出现了一堆版本兼容问题.用我推荐的版本可以完美运行出来狂老师的vue工程小demo 1.Node.js@v12.13.0版本 下载地址:node.js官网 2.安装node.js淘宝镜像加速器(cnpm) npm install cnpm -g
3.vue-cli cnpm instal1 vue-cli-g
4.webpack@4.41.2版本 cnpm install webpack@4.41.2 -g
5.webpack-cli@3.3.9版本 cnpm install webpack-cli@3.3.9 -g
6.vue@2.96版本 7.vue-router@3.1.3版本 cnpm install vue-router@3.1.3 --save-dev
8.node-sass: @4.5.3版本 cnpm install node-sass@4.5.3
9. sass-loader@7.3.1版本 cnpm install sass-loader@7.3.1
Help: 一定一定一定要统一版本 不然到时很多莫名其妙的err.和一堆要几个小时查资料解决的版本不兼容问题 其实说白了:说有用cnpn 指令进行安装的组件版本都可以在package.json中修改然后使用cnpm install
进行安装.付上我的package.json
{ "name" : "hello-vue" , "version" : "1.0.0" , "description" : "A Vue.js project" , "author" : "kuangshen" , "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" : "^4.5.3" , "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" : "^7.3.1" , "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.1.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" ] }
正式开始 步骤 1.使用终端(cmd)到一个空的文件夹 //cd 指令 2.终端输入 vue init webpack hello-vue
//创建一个名为hello-vue的工程 3.终端进入hello-vue文件夹 //cd指令 4.安装依赖 ①路由: cnpm install vue-router@3.1.3 --save-dev
②ElementUI(饿了么UI):npm i element-ui -S
③package.json内容的安装:cnpm install
④sass加载器:cnpm install sass-loader@7.3.1 node-sass@4.5.3 --save-dev
5.启动测试 在hello-vue文件夹下的终端(cmd)输入命令:npm run dev
出现这个就成功了,只需要打开浏览器,在网址输入该地址:http://localhost:8080 即可进入项目页面 6.结束 ,关于安装的这些路由,sass加载器,ElementUI组件的其他使用在这里就不一一讲了.大家可以到B站看视频,我的能力怕讲了误导了大家
给你们 1.【狂神说Java】Vue最新快速上手教程通俗易懂-哔哩哔哩 https://b23.tv/TuYx5IU 2.到这里有同学做了狂老师的笔记:一篇文章,Vue快速入门!!! 3.我的package.sjon在上面第一章自取