vue----安装环境，创建vue项目_vuecli创建项目installing additional dependencies...inv-优快云博客

本文链接：https://blog.youkuaiyun.com/hero_chao/article/details/105366938

本文详细介绍了如何安装Node.js、npm及Vue-cli，利用Vue-cli创建Vue项目，并在Vscode中运行项目，涵盖项目结构解析及环境配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人记录

后端使用json格式将数据返回给前端的三种方式的实现

参考菜鸟驿站教程

1. 安装node.js，npm，vue-cli

官网下载node，有内置的npm，配置环境变量
https://nodejs.org/zh-cn/

//查看node版本
C:\Users\Administrator>node -v
v12.16.2

//查看npm版本
C:\Users\Administrator>npm -v
6.14.4

//获取registry地址
C:\Users\Administrator>npm config get registry
https://registry.npmjs.org/

//更改registry地址为https://registry.npm.taobao.org
//应对npm国外网速慢
C:\Users\Administrator>npm config set registry https://registry.npm.taobao.org

//修改全局变量安装位置
C:\Users\Administrator>npm config set prefix "D:\Program Files\nodejs\node_global_modules"

//卸装原来的vue-cli
C:\Users\Administrator>npm uninstall vue-cli -g
up to date in 0.035s

//全局安装vue/cli
C:\Users\Administrator>npm install -g @vue/cli
//如果npm install -g @vue/cli有错，使用下面的命令
C:\Users\Administrator> npm install -g vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\Program Files\nodejs\node_global_modules\vue -> D:\Program Files\nodejs\node_global_modules\node_modules\vue-cli\bin\vue
D:\Program Files\nodejs\node_global_modules\vue-init -> D:\Program Files\nodejs\node_global_modules\node_modules\vue-cli\bin\vue-init
D:\Program Files\nodejs\node_global_modules\vue-list -> D:\Program Files\nodejs\node_global_modules\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 239 packages from 205 contributors in 18.057s

//如果vue不是内部或者外部的话，配置环境变量添加path  D:\Program Files\nodejs\node_global_modules
C:\Users\Administrator>vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

//查看版本
C:\Users\Administrator>vue -V
2.9.6

//如果想升级到最新版npm install -g @vue/cli
C:\Users\Administrator>npm uninstall vue-cli -g
removed 239 packages in 3.584s
C:\Users\Administrator>npm install -g @vue/cli

C:\Users\Administrator>vue -V
@vue/cli 4.3.1

全局安装默认的位置C:\Users\Administrator\AppData\Roaming\npm（查看npm配置的信息npm config ls），修改全局安装的位置如下，新建文件夹并指定路径，环境变量不需要改变
npm config set prefix “F:\nodejs\npm_global_modules\node_modules”

2. Vue-Cli创建Vue项目

vue create myvue01 default (babel, eslint)默认样式

D:\pro\vue-program>vue create myvue01


Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.3.1
✨  Creating project in D:\pro\vue-program\myvue01.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install D:\pro\vue-program\myvue01\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@3.6.5 postinstall D:\pro\vue-program\myvue01\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\pro\vue-program\myvue01\node_modules\ejs
> node ./postinstall.js

added 1192 packages from 846 contributors in 44.642s

40 packages are looking for funding
  run `npm fund` for details

�  Invoking generators...
�  Installing additional dependencies...

added 54 packages from 39 contributors in 9.172s

42 packages are looking for funding
  run `npm fund` for details

⚓  Running completion hooks...

�  Generating README.md...

�  Successfully created project myvue01.
�  Get started with the following commands:

 $ cd myvue01
 $ npm run serve

D:\pro\vue-program>cd myvue01

D:\pro\vue-program\myvue01>npm run serve

> myvue01@0.1.0 serve D:\pro\vue-program\myvue01
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2959ms                                                                          16:45:44


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.0.1.87:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ctrl+c 关闭

3. vscode运行Vue项目，修改代码

vscode中npm命令行行不通，如下调用–以管理员身份运行
vue create myvue01
项目目录

dist:用于存放我们使用 npm run build 命令打包的项目文件
node_modules:用于存放我们项目的各种依赖，比如axios等等，没有moudles文件，项目就没法运行，可以使用 npm install进行项目依赖的安装
public:用于存放静态文
public/index.html:是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
src:我们存放各种vue文件的地方
src/assets:用于存放各种静态文件，如图片
src/compnents：用于存放我们的公共组件，如 header、footer等
src/views：用于存放我们写好的各种页面，如login、main等
src/App.vue:主vue模块引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
src/main.js:入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
src/router.js:路由文件，这个里边可以理解为各个页面的地址路径，用于我们访问，同时可以直接在里边编写路由守卫
src/store.js：主要用于项目里边的一些状态的保存，state中保存状态，mutations中写用于修改state中的状态，actions暂时没实践，不知道具体怎么使用
package.json:模块基本信息项目开发所需要模块，版本，项目名称
package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
babel.config.js:是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
gitignore:git上传需要忽略的文件格式
vue.config.js:保存vue配置的文件，可以用于设置代理,打包配置等