vue-cli脚手架初始化项目和路由组件搭建

文章详细介绍了Vue项目的基本结构,包括node_modules、public、src等文件夹的作用,以及webpack的打包处理。还提到了如何配置vue-cli服务自动打开浏览器,禁用eslint校验,以及安装和使用vue-router。此外,文章强调了package.json的重要性,并提及了通过淘宝镜像安装依赖的方法。
摘要由CSDN通过智能技术生成

初始化 vue create 加项目名字

  1. node+webpack+淘宝镜像
  2. node_modules文件夹:
    项目依赖文件夹
  3. public文件夹:
    . 一般放置静态资源(图片,)需要注意,放在个文件夹中的静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中
  4. src文件夹(程序员源代码文件夹):
    assets文件夹:
  5. 一般也是放置静态资源的(一般放置多个组件共享的静态资源),需要注意放置在assets文件夹里面静态资源,在webpack会把静态资源当做一个模块没打包js文件里
  6. component文件夹:一般放置的是非路由组件(全局组件)
  7. APP.vue:唯一的跟组件 vue当中的组件(.vue)
  8. main.js:入口文件,也是整个程序当中最先执行的一个文件
  9. babel.config.js配置文件(babel相关)
    10.package.json文件:认为是项目的身份证,记录项目中有哪些依赖怎么运行 记录项目叫什么
    package-lock.json :缓存文件
    README.md:说明性文件
    jsconfig.json src文件夹的别名配置
    pages | views 文件夹:经常放置路由组件
    API文件夹:【axios】

让浏览器自动打开

package.json 记录信息

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service bui     ld",
    "lint": "vue-cli-service lint"
  },```
 改成
     "serve": "vue-cli-service serve --open",
   如下
      "scripts": {
     "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service bui     ld",
    "lint": "vue-cli-service lint"
  },```
     输入代码 npm run serve
# eslint 校验功能关闭
在vue.config.js

```bash
module.exports={
lintOnSave:false
}

jsconfig.json ::src文件夹的别名配置@代表src文件夹

路由组件的搭建

vue-router搭建

安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 
命令 cnpm install --save vue-router

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值