Vue Bootstrap 开始

创建目录结构

|---assets(资源): 
|	|---img
|	|---css
|---components(公共组件)
|	|---common(其他项目也可以使用的公共组件)
|		|---
|	|---content(与本项目业务相关的公共组件)
|---views(大的视图)
|	|---home
|---router(路由相关的东西)
|---store(vuex)
|---network
|---common(公共js文件)
|	---const.js //公共的常量
|	---utils.js //公共的方法
|	---mixin.js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZUWu8GA-1595940770721)(F:\Typora\img\image-20200706194620667.png)]

css 文件导入

normalize.css

base.css

1. 将normalize.css文件复制到asset/css文件夹下

2. 在asset/css先创建我们自己的base.css文件

3. 在base.css中导入normalize.css

   @import "./normalize.css";
   

4. 在Vue.vue中导入base.css

   <style>
     @import "./assets/css/base.css";
     /*下面配置路径别名后可以不用写./ ,直接写assets就可以找到路径*/
     @import "assets/css/base.css";
   </style>
   

导入bootsrtap

1. 使用命令安装bootstrap

   npm install bootstrap --save
   npm install bootstrap --save --save-exact  #精确版本
   

2. 在main.js导入bootstrap

   import 'bootstrap/dist/css/bootstrap.min.css'
   

3. 在吗Vue.js 中添加测试代码

   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <hr>
     <button class="btn btn-primary">确定</button>
     <button class="btn btn-success">使用</button>
     <button class="btn btn-danger">注意</button>
     <hr>
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
   

4. 运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJiUImP3-1595940770729)(F:\Typora\img\image-20200706211010452.png)]

文件路径别名

在总目录下新建vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      extensions: ['js'],
      alias: {
        '@': 'src',
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
        'network': '@/network',
        'common': '@/common'
      }
    }
  }
}

.editorconfig

root = true

[*]
charset=utf-8
end_of_line=lf
insert_final_newline=true
indent_style=space
trim_trailing_whitespace = true
indent_size=2