vue.js学习记录(一):my-project

搭建Vue.js项目
本文详细介绍如何从零开始安装Node.js,设置淘宝镜像,安装Vue和Vue CLI,创建并运行一个名为my-project的Vue项目。步骤包括环境配置、依赖安装、项目初始化及启动。

1,安装node.js。

可以到官网下载 http://nodejs.cn/download/,安装到本地指定目录,然后添加环境变量。

2,安装淘宝镜像。

win+R开启cmd,输入:npm -v 测试刚刚安装好的nodejs。

成功,继续执行:npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后,输入:cnpm -v 测试

3,安装vue和vue cli。

继续执行命令:cnpm install vue

继续执行命令:cnpm install --global vue-cli

4,在指定目录创建vue项目,命名为my-project。

切换目录到指定目录:cd /D E:

进入指定目录:cd E:/vue-demo

使用vue命令创建项目:vue init webpack my-project

接下来会跳出一些指令,需要进行一些配置,默认回车即可

5,进入项目,安装并启动。

cd my-project

cnpm install

cnpm run dev

启动成功后默认访问地址:http://localhost:8080

访问可以看到如下界面:

6,查看创建的my-project项目结构。

7,使用开发工具打开项目,进行编程,例如使用:vscode,使用前先安装vetur插件。

PS D:\lump\neo4jproject\neo4j_vue\my-project> npm run serve > my-project@0.1.0 serve > vue-cli-service serve INFO Starting development server... ERROR Failed to compile with 2 errors 15:52:56 [eslint] Invalid Options: - Unknown options: extensions - 'extensions' has been removed. You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. Error: Child compilation failed: [eslint] Invalid Options: - Unknown options: extensions - 'extensions' has been removed. - child-compiler.js:169 [my-project]/[html-webpack-plugin]/lib/child-compiler.js:169:18 - Compiler.js:629 finalCallback [my-project]/[webpack]/lib/Compiler.js:629:5 - Compiler.js:664 [my-project]/[webpack]/lib/Compiler.js:664:11 - Compiler.js:1350 [my-project]/[webpack]/lib/Compiler.js:1350:17 - task_queues:105 processTicksAndRejections node:internal/process/task_queues:105:5 - task_queues:69 runNextTicks node:internal/process/task_queues:69:3 - timers:459 process.processImmediate node:internal/timers:459:9 ERROR in [eslint] Invalid Options: - Unknown options: extensions - 'extensions' has been removed. ERROR in Error: Child compilation failed: [eslint] Invalid Options: - Unknown options: extensions - 'extensions' has been removed. - child-compiler.js:169 [my-project]/[html-webpack-plugin]/lib/child-compiler.js:169:18 - Compiler.js:629 finalCallback [my-project]/[webpack]/lib/Compiler.js:629:5 - Compiler.js:664 [my-project]/[webpack]/lib/Compiler.js:664:11 - Compiler.js:1350 [my-project]/[webpack]/lib/Compiler.js:1350:17 - task_queues:105 processTicksAndRejections node:internal/process/task_queues:105:5 - task_queues:69 runNextTicks node:internal/process/task_queues:69:3 - timers:459 process.processImmediate
03-22
> my-project@0.1.0 serve > vue-cli-service serve INFO Starting development server... ERROR Failed to compile with 3 errors 17:44:04 [eslint] D:\renjiaxin\my-project\src\views\HomeView.vue 9:5 error Parsing error: x-invalid-end-tag vue/no-parsing-error D:\renjiaxin\my-project\src\views\JavaSumView.vue 69:33 error 'idx' is defined but never used no-unused-vars 106:33 error 'idx' is defined but never used no-unused-vars D:\renjiaxin\my-project\src\views\MLSumView.vue 69:33 error 'idx' is defined but never used no-unused-vars 106:33 error 'idx' is defined but never used no-unused-vars D:\renjiaxin\my-project\src\views\Prediction.vue 1:1 error Component name "Prediction" should always be multi-word vue/multi-word-component-names D:\renjiaxin\my-project\src\views\PythonSumView.vue 69:33 error 'idx' is defined but never used no-unused-vars 106:33 error 'idx' is defined but never used no-unused-vars ✖ 8 problems (8 errors, 0 warnings) You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. error in ./src/views/SkillCloud.vue?vue&type=script&lang=js Module not found: Error: Can't resolve 'echarts-wordcloud' in 'D:\renjiaxin\my-project\src\views' error in ./src/router/index.js Module not found: Error: Can't resolve 'vue-router' in 'D:\renjiaxin\my-project\src\router' ERROR in ./src/views/SkillCloud.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/SkillCloud.vue?vue&type=script&lang=js) 3:0-27 Module not found: Error: Can't resolve 'echarts-wordcloud' in 'D:\renjiaxin\my-project\src\views' @ ./src/views/SkillCloud.vue?vue&type=script&lang=js 1:0-203 1:219-222 1:224-424 1:224-424 @ ./src/views/SkillCloud.vue 2:0-61 10:2-8 3:0-56 3:0-56 @ ./src/router/index.js 12:0-48 61:13-23 @ ./src/main.js 5:0-30 11:2-8 ERROR in ./src/router/index.js 2:0-35 Module not found: Error: Can't resolve 'vue-router' in 'D:\renjiaxin\my-project\src\router' @ ./src/main.js 5:0-30 11:2-8 ERROR in [eslint] D:\renjiaxin\my-project\src\views\HomeView.vue 9:5 error Parsing error: x-invalid-end-tag vue/no-parsing-error D:\renjiaxin\my-project\src\views\JavaSumView.vue 69:33 error 'idx' is defined but never used no-unused-vars 106:33 error 'idx' is defined but never used no-unused-vars D:\renjiaxin\my-project\src\views\MLSumView.vue 69:33 error 'idx' is defined but never used no-unused-vars 106:33 error 'idx' is defined but never used no-unused-vars D:\renjiaxin\my-project\src\views\Prediction.vue 1:1 error Component name "Prediction" should always be multi-word vue/multi-word-component-names D:\renjiaxin\my-project\src\views\PythonSumView.vue 69:33 error 'idx' is defined but never used no-unused-vars 106:33 error 'idx' is defined but never used no-unused-vars ✖ 8 problems (8 errors, 0 warnings)
最新发布
09-25
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值