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

终于将学了这么久,踉踉跄跄来到了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:git忽略的文件。
.postcssrc.js:兼容选项(如果已经安装postcss,需要一大堆loader配置,这时项目根目录会生成“.postcssrc.js”文件)。

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

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

在这里插入图片描述
在这里插入图片描述

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

Logo

前往低代码交流专区

更多推荐