1安装node

去node官方下载
打开cmd输入node -v安装完成会出现版本号,输入npm -v出现版本号说明安装成功
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用

2安装vue cli

在控制台输入npm install @vue/cli -g g是全局安装 如果你安装了yarn可以用yarn安装yarn global add @vue/cli
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用

安装好输入vue --version 出现版本号说明安装成功
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用
npm root-g 可以查看当前安装的路径
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用

3创建vue项目

想在哪个文件夹下创建项目,直接在文件的目录下输入cmd就可以了
打开cmd输入vue create project project是项目名然后按回车

零基础用脚手架搭建vue项目,vue项目各个文件夹的作用
default 默认自动安装配置好的东西:babel处理js的eslink词法检测,想手动安装的选第二个manually按上下箭头可以选择

手动创建选第二个会出来这个页面

零基础用脚手架搭建vue项目,vue项目各个文件夹的作用
有✳的是默认选择这个也是按上下键控制,空格键选择和取消,选好按enter回车键
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用
然后根据自己的需要来选择y还是n,
到这一步一般都是选择package.json把文件都放在里面
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用
这样就是创建成功了,这时你还在你创建的路径下有一个 project文件夹这个就是创建的项目
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用
如果你嫌麻烦直接选择defauli一键搞定

4vue项目

这个就是我们创建的页面
零基础用脚手架搭建vue项目,vue项目各个文件夹的作用

node_modules

安装好的各个模块

public

存放的是最后编译项目时候的页面模板 里面index.html要是你单页面开发一个就够了,里面的代码可以修改,比如你是移动端开发可以在里面配置rem,公共资源等等

src

src包含整个项目中所有需要包含的代码(脚手架生成的webpack配置项,只对src目录进行编译处理,其他目录是不处理的)

api 在开发项目时一般都是在src下创建一个文件夹api在里面对axios进行二次封装,组件化创建文件对应的页面在对应的文件下发请求,方便管理

assets src下的assets是放静态资源的

components页面级组件的一部分页面,公共组件

router src下的router是配置路由

store store是vuex仓库一般方便开发都会对vuex进行拆分

views 页面级组件

app.vue当前页面的主要入口

main.js 项目入口(单页面一个入口,多页面多个入口)

.gitignore

不想要的可以删掉

bobel.config.jsp

boobel的配置信息(编译解析js)

package.json

当前项目依赖清单(脚手架生成的项目中,我们还会把一些webpack需要用到的配置信息,也写在这里)
可执行脚本命令
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”
},
dependencies里面的是生产依赖

readme.md

一些命令

相关文章:

  • 2022-12-23
  • 2022-01-01
  • 2021-07-26
  • 2021-03-31
  • 2022-12-23
  • 2023-01-28
  • 2021-09-08
  • 2021-12-26
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-10-16
  • 2021-12-19
  • 2021-12-28
  • 2021-12-02
  • 2021-09-22
相关资源
相似解决方案