cli:翻译为命令行界面,俗称是脚手架,我来为大家科普一下关于vue前端项目访问路径在哪?以下内容希望对你有帮助!
vue前端项目访问路径在哪
1:什么是vue clicli:翻译为命令行界面,俗称是脚手架。
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"
},
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.10:.eslintignore代码做一些检查的时候忽略的文件
8.11:.eslintrc.js代码检测配置
8.12:.gitignore上传服务器的时候,不需要上传
8.13:.postcssrc.jscss转化需要的
8.14:package.json所需要的依赖的包
8.15:package-lock.json记录安装的真实版本
例如:"vue-router": "^3.0.1" ^这个符号的意思是安装大于这个版本的依赖,并不一定是这个版本
,