vscode构建vue项目

 第一次构建，笔记。
 
1、nodejs安装
检查安装  
node -v

 

2、vscode安装
 https://www.cnblogs.com/lanrenka/articles/15344158.html
 
3、本地新建空文件夹myvue，用vscode打开
 
4、全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。
打开vscode终端，
旧版
npm install -g vue-cli
新版
npm install -g @vue/cli
都报错：
  
 1 PS E:\KrystalCode2021\webDevelop\myvue> npm install -g vue-cli
 2 npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli        
 3 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
 4 npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
 5 npm ERR! code Z_BUF_ERROR
 6 npm ERR! errno -5
 7 npm ERR! zlib: unexpected end of file
 8 
 9 npm ERR! A complete log of this run can be found in:
10 npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-09-27T07_40_09_217Z-debug.log
11 PS E:\KrystalCode2021\webDevelop\myvue> npm install -g @vue/cli
12 npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
13 npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
14 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
15 npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
16 npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
17 npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
18 npm WARN deprecated har-validator@5.1.5: this library is no longer supported
19 npm ERR! code Z_BUF_ERROR
20 npm ERR! errno -5
21 npm ERR! zlib: unexpected end of file
22 
23 npm ERR! A complete log of this run can be found in:
24 npm ERR!     D:\Program Files\nodejs\node_cache\_logs\2021-09-27T07_43_54_059Z-debug.log

 

解决方案（参考链接）：

5、安装webpack，它是打包js的工具

npm install -g webpack
6、创建vue项目
vue init webpack myvue
myvue就是项目名称，也是文件夹名称
出现以下配置，基本回车即可，也就是取值默认项
 1 PS E:\KrystalCode\webDevelop\myvue> vue init webpack myvue
 2 
 3 ? Project name myvue
 4 ? Project description A Vue.js project
 5 ? Author albertfeng <albertfeng@uvanart.com>
 6 ? Vue build standalone
 7 ? Install vue-router? Yes
 8 ? Use ESLint to lint your code? Yes
 9 ? Pick an ESLint preset Standard
10 ? Set up unit tests No
11 ? Setup e2e tests with Nightwatch? No
12 ? Should we run `npm install` for you after the project has been created? (recommended) npm

 

最后一项回车，就在初始化项目中，
成功界面：

看文件夹：

 

vscode左侧界面：

 

7、main.js是程序入口

8、修改端口

打开index.js

 

改成你想要的端口，比如我的，8888
 
9、然后运行项目，在终端执行
npm run dev
然后很尴尬，报错了。
 1 PS E:\KrystalCode\webDevelop\myvue> npm run dev
 2 npm ERR! path E:\KrystalCode\webDevelop\myvue\package.json
 3 npm ERR! code ENOENT
 4 npm ERR! errno -4058
 5 npm ERR! syscall open
 6 npm ERR! enoent ENOENT: no such file or directory, open 'E:\KrystalCode\webDevelop\myvue\package.json'
 7 npm ERR! enoent This is related to npm not being able to find a file.
 8 npm ERR! enoent
 9 
10 npm ERR! A complete log of this run can be found in:
11 npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-09-27T08_13_11_686Z-debug.log
查看npm镜像
npm get registry
出现下图，这代表是 官方镜像源

修改成国内镜像：
npm config set registry https://registry.npm.taobao.org
如若需要再切换成官方：
npm config set registry https://registry.npmjs.org/
还是报错：

 

最终发现，是没有进入到文件夹里。
进入工作区间，
cd 项目名/文件夹名称

在执行运行项目命令
npm run dev

 

 

9、成功后访问网址：
注意：localhost只能本地访问，局域网其他电脑无法访问，除非在项目启动前改成ip地址。
完美。

 


 

10、修改首页
既然首页已经成功，那总要自己验证下嘛，那我们就玩一下首页，去菜鸟找了界面
打开index.html，注释名称为app的div，然后增加文本，增加样式。如下：
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>myvue</title>
 7     <style>
 8       body
 9       {
10         background-image:url('https://static.runoob.com/images/mix/gradient2.png');
11         background-repeat:repeat-x;
12       }
13       </style>
14   </head>
15   <body>
16     <!-- <div id="app"></div> -->
17     <!-- built files will be auto injected -->
18     <h1>Hello World!</h1>
19   </body>
20 </html>
保存，重新访问网页

 

 哈哈哈，第一次构建，成功啦啦啦。

 

posted @ 2021-09-27 19:16  lanrenka  阅读(275)  评论(0)    收藏  举报