vue高级2-用npm下载vue-cli、webpack、创建vue项目、项目文件关系

淘宝镜像下载https://www.cnblogs.com/kyshu/p/9453384.html，就跟用npm一样不过是把npm改称cnpm，报错的话–vue不是内部或外部命令解决方案：https://blog.****.net/a19990412/article/details/82528242

=》vue init webpack myproject（myproject是文件名字，自己随便起）
=》（一路回车全选n，尤其是ESLint这是用来规范格式的，哪怕一个空格也会出错，除非你是非常严谨的人选y，后面会写路由安装就是vue-router）

此时你的文件夹里会有node_modules

=》cd myproject （cd的意思就是进入文件夹）
=》npm run dev（如果是用的cnpm就是cnpm run dev，意思就是运行你的项目）
=》返回一个域名 http://localhost:8080 输入到网址可以转入到你的项目

把真个文件夹拖到vscode

每个包都有node_modules
红色的是生产以来，蓝色的是开发依赖
（生产环境：项目上线运行时候的环境，开发环境：本地开发项目的环境）
生产依赖和开发依赖不一样，像webpack等等辅助开发的，在开发环境中使用的东西，就没有必要放在生产依赖里

在myproject文件夹里shift+点击右键，打开命令行窗口，输入npm或者cnpm install vue-router --save就可以安装路由了， --save是加入到生产依赖里面的意思，–save-dev是加入到开发依赖里面，一般都是–save

脚手架目录预览：https://www.cnblogs.com/hongdiandian/p/8311645.html

所有的js文件要到import到main.js，这是js的入口文件，而App.vue是单文件组件，是把组件js文件抽离出来，变成原生的style,template,script，因为没有高亮，所以右下角会有弹框点击install，没有弹框就搜@id:octref.vetur安装

App.vue中，html标签要写入template模板里面

里面有一个helloworld的组件，组件文件在components里面

组件的内容在helloworld.vue里面，export里面加了一个name，就是组件的名称，里面是这个组件具体内容，就是data,methods之类的，起名叫helloworld，导出到app.vue里

从helloworld.vue导出，导入在app.vue里面，其中components里面就写有哪些组件，就是刚刚起名的helloworld组件

这里也加了一个组件名称app，导入到主文件mian.js

意思就是helloworld.vue文件export到app.vue里面，app.vue再export到main.js（helloworld.vue --> app.vue --> main.js），所有的文件都在app.vue这个文件里渲染

static里面存放整个项目的图片，而assets是存放图片的是这个页面的图片，Ps切的图，logo，字体，静态资源都在这里写

目录可以随意更改，main.js不能动
config --配置文件，生产的配置文件
build --打包之后的文件

开发的话就在src里面开发