Vue-cli 3相关配置操作记录( 目录结构)

–谁的人生不是经历苦难一步一步躺过来的,或许只有痛苦才能让人成长吧
加油吧,前行的道路纵然坎坷,终有一天希望会来到我的身边.

终于将学了这么久,踉踉跄跄来到了Vue这里,记录一下我今天所学的吧;
在Vscode 最好先装一个Vetur插件,常用的Vue 功能都有;

官方文档:文档

值得多次查看的文章:Vue的基础简介

:Vue的跨域问题

1.首先 在命令行输入npm install -g @vue/cli
值得一提的是,这里所先是在安装node.js 的基础下完成的,终端最好也在管理员的模式下进行的,不能可能会出现请求不允许的情况,

这里安装好了之后,就可以新建一个文件夹,在在此文件夹的下打开终端,输入:

vue create 文件名

之后便是配置初始的文件这里使用空格进行确定的

这里值得注意的是:

---

vue config ls 可以查看当前的安装的文件;

这里只是大致操作具体的就没有展开;

接下来我们看看目录结构吧;

1.node_moules文件
node_moules：存放的是npm加载的项目依赖模块 ，以后要添加依赖也是放在这个里面

src文件

src：放置组件和入口文件。
assets：主要存放一些静态图片资源的目录。(css 等也可放在这里)
views :放置的为公共组件(主要还是各个主要页面)
components：(自定义功能组件)这里存放的是开发需要的的各种组件，各个组件联系在一起组成一个完整的项目。
…
router：存放了项目路由文件。
App.vue：是项目主(/根)组件，***也是项目所有组件和路由的出口***，之后它会被渲染到项目根目录的 index.html 中显示出来，我们可以在这里写一些适合全局的css样式。
…
main.js：入口文件，引入了vue模块和app.vue组件以及路由router，我们需要在全局使用的一些东西也可以定义在这里面。
store.js: 为vuex的文件

其他文件
.babelrc：ES6语法编译配置。
.editorconfig：代码编写规格。
.eslintignore：项目的根目录中创建文件来告诉ESLint忽略特定的文件和目录，该文件是纯文本文件。
.eslintrc.js：eslint的配置文件，eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件，当有不符合配置文件内容的代码出现就会报错或者警告。
.gitignore：忽略的文件。
.postcssrc.js：兼容选项（如果已经安装postcss，需要一大堆loader配置，这时项目根目录会生成“.postcssrc.js”文件）。

package.json：项目及工具的依赖配置文件。只是粗略的版本,具体依赖于
paxkage-lock.json(这个文件十分重要不可丢失)
README.md：项目说明。

.vue 后缀名的文件为单文件组件, 则这里的@也就代表了src 的目录,也就不用再考虑绝对路径与相对路径的问题
./ 则是相对于当前的目录下导入, …/ 是相对于不同分级下的路径

最后使用npm run serve 进行启动初始化项目;在浏览器中打开相应的端口就可以看到页面