VUE项目初体验——基本准备工作

跟着王红元codewhy老师做一个vuejs项目 记录一下笔记

常用的终端命令

git clone address 将github上的仓库拷贝到代码器

vue create name 创建一个新的项目

划分src中的基本项目结构

①asset资源文件夹，里面包括css文件夹和img文件夹。其中的logo.png是自带的vue的图片，可以删掉

②components组件文件夹：将一些页面共有的组成部分放到该文件夹方便多次调用。里面包括common文件夹存放可能在多个项目中使用的组件（和其他业务公用），content则是该项目使用的组件（和其余页面公用）

③views视图文件夹，里面存放首页、购物车等大页面视图

④router文件夹：路由

⑤store文件夹：vuex 公用状态管理的文件夹

⑥network文件夹：网络相关的都放在这里

⑦common文件夹：把常用的js文件抽取出来，在其中建一个const.js文件，将常用的变量抽取出来；一个utils.js文件，将常用的方法抽取出来

文件结构如图所示

划分css

针对不同浏览器上css标签的样式不同的情况，首先对所有css样式做一个统一，在assets文件夹中建立normalize.css，导入github上的normalize.css代码。同样，建立base.css存放本地css样式。

在base.css中@import "./normalize.css"，接着在app.vue中@import "./assets/css/base.css"，这样项目运行时，将由main.js执行到app.vue，再执行到base.css，接着是normalize.css。

关于代码中的@，解释来源于博客园Vue中import '@...'是什么 - DarJeely - 博客园

配置路径别名

 脚手架3中将源码隐藏了起来，想要修改配置，不要随便修改node_modules，在项目中建一个vue.config.js（和src同层）

module.exports = {
    configureWebpack:{
        resolve:{
            /*alias别名*/
            alias:{
                'assets':'@/assets',
               ' common':'@/common',
                'components':'@/components',
                'network':'@/network',
                'views':'@/views',
            }
        }
    }
}

 同时，在脚手架2中新建vue文件时，会自带一个.editorconfig，用来为编写该项目的程序员统一标准，例如缩进几个空格等。

root = true

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