vue前端项目访问路径在哪（vue-cli创建vue项目目录含义解析总结Npm）

cli：翻译为命令行界面，俗称是脚手架，我来为大家科普一下关于vue前端项目访问路径在哪?以下内容希望对你有帮助!

vue前端项目访问路径在哪

1：什么是vue cli

cli：翻译为命令行界面，俗称是脚手架。

vue cli 是官方发布vue.js项目脚手架，使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。

2：前提 安装node3：什么是NPM？

NPM全称是Node Package Manager，是一个NodeJs包管理和分发工具，已经成为非官方的发布 Node模块(包)的标准。

通过NPM安装开发过程中的一些依赖包。

4:cnpm

由于国内安装npm的官方镜像很慢，这里推荐使用淘宝NPM镜像。

你可以使用淘宝定制的cnpm(gzip压缩支持)命令工具代替默认的npm。

5：vue.js官方脚手架工具

就使用了webpack模板对所有的资源会压缩等优化操作。

它在开发过程中提供了一套完整的功能，能够使得我们在开发中变得高效。

6：安装vue脚手架

npm install -g @vue/cli

安装之后查看版本 vue -v

7：创建vue项目

vue init webpack vue-project(项目名)

8：生成的项目目录解析8.1：package.json：

package.json： "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" },

8.2：build：命令的意思是打包

build下边的build.js文件 node是可以执行文件的。

node是为了js提供了一个运行环境，node是用c 开发的，核心是v8引擎。

谷歌用的v8引擎，为啥v8引擎速度快？

因为：js先生成字节码，再把字节码跑在浏览器上，v8引擎跳过了字节码，直接把js编译成了二进制码，build.js: 里边用了rm(remove缩写)执行命令，删除之前打包过的文件夹， 再通过webpack拿到webpackConfig配置

webpackConfig是什么东西？

const webpackConfig = require('./webpack.prod.conf')

合并基础配置（导出导入的一些路径地址，配置的css等一些规则）和一些特殊的配置

8.3：dev命令

webpack-dev-server：本地服务

--inline --progress --config 进程

build/webpack.dev.conf.js 一些dev本地的配置

8.4：config文件夹

是配置了一些变量（变量名可以更改的）

8.5：node_modules

是node一些包，开发中依赖的一些包。

8.6：src文件夹

是写开发者自己的代码的

8.7：static文件夹

是放一些静态的资源，如果把一些静态的放这里，到时候会打包会原封不动的打包进去。

8.8：.babelrc

我们知道，会把es6转成es5，到底是那些转？ { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] // > 1% 市场份额大于1%的浏览器适配， // last 2 versions 并且是最后的两个版本 // not ie <= 8 ie<=8就不要考虑了 } }], "stage-2" 阶段 ], "plugins": ["transform-vue-jsx", "transform-runtime"] // 转化的时候依赖的一些插件 }

8.9: editorconfig

对代码进行一些统一

8.10：.eslintignore

代码做一些检查的时候忽略的文件

8.11：.eslintrc.js

代码检测配置

8.12：.gitignore

上传服务器的时候，不需要上传

8.13：.postcssrc.js

css转化需要的

8.14：package.json

所需要的依赖的包

8.15：package-lock.json

记录安装的真实版本

例如："vue-router": "^3.0.1" ^这个符号的意思是安装大于这个版本的依赖，并不一定是这个版本

,