vue/cli快速搭建vue项目

安装node、npm、vue/cli

首先我们来看如何使用脚手架创建一个vue项目，
脚手架别人写好的一坨代码，它像其他包一样，放在了npm上
npm是一个js的包管理工具，它内置在node环境里
首先，安装node
学到这里，你应该已经安好了，如果没有，这里有一个链接
然后，搞一个cnpm
npm的服务器在国外，而cnpm是它的国内版本，cnpm需要使用npm安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后，安装脚手架

cnpm install -g @vue/cli

至此我们拥有了一个无敌的大佬，它专业创建vue项目
检查一下安好了没

vue -V

创建项目

开动，创建

vue create myvue123

然后选个默认就行了，一个单纯的项目就创建完成了

欣赏一下成果

npm run serve

中间有一些配置，这玩意随便配，创建完成以后依旧可以装，都是些工具包。另外可以使用vue ui来开启ui界面，跟命令行的文字界面差不多。

网络不好靠cv创建项目

然而网络不好就会十分尴尬，运气好能出个目录，然后删掉node_modules之后，输入cnpm i回车
运气不好，它没给你创建目录出来，这就很烦，所以我们先来解决问题，再回过头来，看看这个目录都是些啥玩意

打开一个以前的项目，复制除了node_modules之外的东西，到新项目
这样我们就有目录了啊，我们可以专门自己建一个只有目录的项目，专门拿来复制，甚至各种配置文件都准备几份
修改各个配置文件，达到自己想要的效果
那么我们就要去认识这一堆复制过来的文件了，到底需要改哪个？

node_modules,里面是项目的依赖包，这个需要在.gitignore配置白名单，不要上传到远程 仓库
.gitignore是git的配置文件，里面可以配置白名单

可以看到，配置方法就是，写在上面即可，git就不管它了，依赖这个东西都在网上，通过package.json就可以下载，没必要把自己下好的发出去，别人根据名单网上下就行

pulic静态资源文件夹

里面放的都是一动不动的东西，他跟assets的区别是，它不会经过webpack处理，我们用的一般的小图片啊，放在assets里，经过处理时，可能会转换成base64格式，来减少对服务器的请求次数，css、less、scss什么的，会经过翻译，压缩…

src是我们工作的阵地
里面assets放js、css、images等需要编译压缩的静态文件
里面的comoponents里面放可以复用的组件，像小小的组件，而view里面放大大的组件，一般是不能服用的，换句话说，我们可以在views里面的组件中引用components里面的组件作为子组件，而不会相反
我解释清楚了没？
router文件夹，里面放个路由的js，store的组件里面放个vuex的js

这个必须引用vue和vue-router,然后创建路由实例，之后把路由规则写好，最后在main.js里面的vue实例中挂载这个路由实例

下同

views里面放一般的不可以复用的，页面级的组件

App.vue是根组件，一个普通的组件，然后在main.js中把它当做根组件来用

render:h=>h(App)
就是把components和template全部写好的意思
总而言之，这个#app找到的就是App.vue中的<div id="app"></div>

剩下的小东西，点赞超过十个我就过来补上…(讲究~)

vite（100毫秒实现打包）

vue3的话，就比较简单了，首先更新自己的脚手架,到4.5.0以上版本

npm i -g @vue/cli@next

然后创建项目

npm init vite-app myapp123

然后配置package.json，找以前的复制过来，然后下载依赖包

npm i

最后运行项目

npm run dev

DevTools（vue调试工具）

首先，下载dev-tools就是上图的网址

然后,解压，拖进来
Chrome–设置–扩展程序,
右上角有个开发者模式，打开,
拖进来以后有个详细信息，
上图中百度翻译上边那里,
点开，把允许文件访问网页打开，
然后就算安装好了，
第一次用有可能出问题，我是按f12按f5多试几次记好了，
这是vue的调试工具，使用vue.js而非vue.min.js开发的网页，
进来之后，f12，就看到有个vue出来了