Vue-cli 3相关配置操作记录( 目录结构)
–谁的人生不是经历苦难一步一步躺过来的,或许只有痛苦才能让人成长吧加油吧,前行的道路纵然坎坷,终有一天希望会来到我的身边.终于将学了这么久,踉踉跄跄来到了Vue这里,记录一下我今天所学的吧;1.首先 在命令行输入npm install -g @vue/cli值得一提的是,这里所先是在安装node.js的基础下完成的,终端最好也在管理员的模式下进行的,不能可能会出现请求不允许的情况,...
–谁的人生不是经历苦难一步一步躺过来的,或许只有痛苦才能让人成长吧
加油吧,前行的道路纵然坎坷,终有一天希望会来到我的身边.
终于将学了这么久,踉踉跄跄来到了Vue这里,记录一下我今天所学的吧;
在Vscode 最好先装一个Vetur插件,常用的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
进行启动初始化项目;在浏览器中打开相应的端口就可以看到页面
更多推荐
所有评论(0)