vuejs学习4.2 vueCLI2初始化项目与目录结构解析

最新推荐文章于 2021-10-15 16:02:34 发布

to-and-fro

最新推荐文章于 2021-10-15 16:02:34 发布

阅读量271

点赞数 1

分类专栏： vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_39225271/article/details/108347131

版权

vuejs 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

vuejs

使用vuecli2初始化项目
目录结构的解析

使用vuecli2初始化项目

vuecli2learn为项目名

vue init webpack vuecli2learn

然后填写信息
在这里插入图片描述
然后选择runtime compiler或者runtime only，两者区别，这里暂时选择runtime compiler

然后先不安装路由，选择no
然后

这里选择n，（如果选择Y，如果代码不规范就会编译不通过，例如：const name =“1233”，等号左边没空格，右边有空格）（如果选择Y，下面会选择规范模式，standard，airbnb，none表示自己定义）
然后set up unit tests选择n（这里表示是否使用单元测试）
在这里插入图片描述
然后下面选择no（表示端到端（end to end）测试，安装nightwatch，自动化测试框架）

然后选择npm（选择npm来管理项目）

创建项目成功！

目录结构的解析

在这里插入图片描述

build文件夹和config文件夹

两个文件夹表示对webpack的配置，
在package.json中可以看到
在这里插入图片描述

build

npm run build表示打包，而这里直接使用node运行js文件，（node是用C++开发的，V8引擎，可以直接运行js代码）
v8引擎：js代码运行需要js先生成字节码，然后再放在浏览器上运行，而v8引擎把js代码生成二进制代码，所以chrome运行速度要快
而build.js文件中
在这里插入图片描述
在webpack.prod.conf文件中

dev

npm run dev 表示开发，表示配置为build/webpack.dev.conf.js"，同build的配置一样，在webpack.dev.conf.js中导入基本配置，生成相应配置
config文件夹中定义的变量，
index.js中里面很多基础的变量，可以进行修改，之后会用到

node_modules中是安装的package.json中的依赖
在这里插入图片描述