项目搭建过程要用到
①Node.js 10版本, node —version如果不是10的话，要卸载去Node.js官网重新下载。注意重装Node.js后，以前用的npm 或 yarn命令可能会消失不见，如果需要的话，可重新安装这些命令。为加快下载速度，建议用镜像淘宝源（运行如下代码）
npm install -g nrm —registry=https://registry.npm.taobao.org
nrm use taobao
②要安装vue/cli@4.1.2 ``` vue —version # 如果这个命令打印出一个版本号，而版本号又不是 4.1.2 就说明你需要卸载 yarn global remove @vue/cli //然后就可以安装了，命令如下 yarn global add @vue/cli@4.1.2 vue —version # 版本号应该是 4.1.2 安装成功后，可以初始化一个项目
③初始化一个项目<br />在项目文件夹目录下运行如下代码
vue create xxx(项目的名字) 需要选择很多的配置，请仔细选 cd xxx yarn serve
开启服务器看到如下界面的话，就表示基础搭建成功啦，一般Vue会替我们开一个8080端口。<br />2. 使用webstorm开发，快捷高效，在创建vue文件时，自定义它初始化的内容<br />那如果我们自定义它初始化的内容怎么操作呢(如图)?需要在settings里设置。<br /><br /><br />在上图模板中修改。3. 在js ,ts里面，引用路径要怎样写才方便？直接写 `import x from '@/xxx/xxx'` ,这里的@就代表src目录。4. 在css里面使用@来代替src的方式？<br />如果此时我们想在app里引用这个颜色，怎么写呢？<br /><br />这里的~@就代表src了，但webstorm并不认识（因为如图有画红波浪线），我们需要设置一下<br /><br />点击右边文件夹，找到如下图的项目里的webpack配置文件，点确定即可。<br /><br />之前的红色报错消失了。5. `git reset --hard HEAD` 这句话会把当前所有的变动都删掉,无法返回。5. 在router文件夹中设置对应路由7. 导航栏小问题在一开始的时候，直接把导航栏放在了App.vue里面，后面发现实际上有一些页面并不需要导航栏，比如404页面，所以想到放在全局的App.vue里面并不妥，干脆写成一个组件，就哪个页面想用导航栏的就调用导航栏，后来又发现要引用的页面也挺多的，如果每个页面的script里都引用，会显得很啰嗦重复，于是后来引用直接放到了main.js里面，全局引入，这样一个页面想用Nav导航栏，直接用就可以，非常方便。8. 经验之谈，千万不要在手机上使用fixed定位。尽量用flex布局。8. scoped的用法意义。如果不想命名冲突，可以再组件里style标签上加上scoped属性，其表明（如下图），这个nav的style只在这个组件范围内管用。实际上， 这个scoped其实是Vue替我们做了两件事情，第一，会在class上自动加一个随机数，data-set-x1，就是在template中的第一行变为 `<div class="nav data-set-x1" ` 第二件事情，它会在CSS上面加上这个属性选择器，也即 `.nav[data-set-x1]{border:1px solid red}` ，这的确是一个聪明简单的做法。所以只要加上scoped，这个nav只会影响当前template里的nav。<br /> <br />所以只要能加scoped的时候都加上。10. 当引入svg时，需要在.d.ts结尾文杰中写入如下代码，方可引用svg图片成功。11. 想使用svg-sprite-loader得需要改webpack配置文件，但我们只有Vue.config,js文件，所以需要我们把webpack修改的内容，翻译一下写到Vue.config.js里，过程有些复杂，需写入如下代码。```javascriptconst path = require('path')module.exports = {lintOnSave: false,chainWebpack:config=>{const dir = path.resolve(__dirname,'src/assets/icons')config.module.rule('svg-sprite').test(/\.svg$/).include.add(dir).end()//包含icons目录.use('svg-sprite-loader').loader('svg-sprite-loader'),options({extract:false}).end()config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite:true}])config.module.rule('svg').exclude.add(dir)//其他svg loader 排除 icons 目录}}
svg-sprite-loader会把先在body里生成一个svg标签，然后再把图片都变成symbol标签，从而显示到页面上，而我们使用图片的时候也很方便，只要用<svg> <use xlink:href="#index"/></svg> 就可以使用。
那如果每次引用一个图片就要在script里写一次import x from “@/xxx”，那如果有100个图片怎么办？有没有什么办法可以一次性引入一个icons文件夹呢？有的，如下
let importAll = (requireContext:__WebpackModuleApi.RequireContext)=> requireContext.keys().forEach(requireContext);try {importAll(require.context('../assets/icons', true, /\.svg$/));}catch (error) {console.log(error);}
那可是使用svg标签放入图片时候也会非常重复，如下
这时我们就又要考虑封装了，把重复的部分都写道Icon的组件里，再在main.js全局引入Icon组件，当需要引用图片是就用Icon标签就可以，如下图，
- 遇到的较难的问题
——svgo删除fill
在做导航栏点击后，图标变色的时候，我遇到了一个bug,有一些icon本身带有颜色，导致无法使用SCSS给它再上颜色，于是我就打开了这个svg图标的源代码看了一下，发现它其实就里面有fill这个属性，只要把fill删掉，本身颜色就会消失。但是又有一个问题，如果每个图标都要手动去找fill属性再删除，那会是非常麻烦的一件事，于是我又上google搜索了相关的信息，发现有一个叫svgo-loader的加载器，它可以对svg形式的文件进行操作，我就去阅读了它的源文档，因为猜想它应该可以有和颜色相关的功能，果然找到了一个叫removeAttrs的属性，它可以删除fill，于是我就是下载了这个svgo-loader，并且在Vue.config.js中配置了svgo-loader的一些功能。最后成功地解决了这个问题，只要浏览器在加载svg文件时，他们本身的颜色都会被去掉，从而可以让我们自己通过css去操作它的颜色。
- CSS有用小知识
——@extend %x用法
在helper.scss里写上 如下代码，即可在别的想用的地方去占位。
//helper.scss%x{&::after {content:'';clear:both;display:block;}}//在style中可以这样写来引用. output{@extend %x;font-size:36px;....}.buttons{@extend %x;> button {....}}//这样写的意思就是x的位置被.output 和.buttons占位。即意味着.buttons::after, .output::after{content:"";clear:both;display:block;}//就不需要每个地方都再写一样的三行代码
- TS组件 @Prop 装饰器
图中引入的vue-property-decorator是另一个叫kaorun343的github用户上传的库，比原始的vue要好用一些，在用typescript时，需要引入prop的过程中，我们需要提前表明传入参数属性。如图所示 @Prop(Number) xxx: number | undefined ，这句代码前后两个地方的Number表明的目的不一样，前面是告诉Vue xxx是个number，后面的number|undefined是告诉Typescript这是number | undefined。
那有什么意义呢？为什么要这样声明两次呢？
这就要牵扯到TS的不同之处了，它其实有一个预编译的compiler。与JS是如下图这样合作的：
由于有预编译的能力，ts会在一开始你还没运行代码就能告诉你哪里写错了，它会强调让你写类型，其实如果你不管TS的报错，继续运行，也能正常运行。Typescript的好处有如下
- 类型提示：更智能的提示
- 编译时报错：还没运行代码就知道自己写错了
类型检查：无法点出错误的属性
一个很方便的class=”selected”判断写法
<li v-for="tag in dataSouce" :key="tag":class="{selected: selectedTags.indexOf(tag)>=0}"//用这种对象的方式写，简洁一些，后面是true的话就展现，是false的话就不展现。@click="toggle(tag)">{{tag}}</li>
v-model
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用
valueproperty 和input事件； - checkbox 和 radio 使用
checkedproperty 和change事件； - select 字段将
value作为 prop 并将change作为事件。<input type="text":value="x" @input="x=$event.target.value"//这里可以直接写成v-model="x"placehoder="在这里输入备注">。。。。export default class Notes extends Vue{value='';。。}
- mvc模型思想很重要
当编写好Money页面的主要逻辑后，就需要用MVC的视角来审视它，需要把跟Model相关的数据提炼出来，避免单独在页面中一次又一次的重复写调用代码。新建model.js文件，写入如下
当ts文件需要引入js文件的时候怎么办呢？
一般的引入方法是不会成功的，我们需要用reqire，如图
并且我们需要在后面加上.default，如果我们在上面图片最后一行导出时，是 export {model} 这样写的话，我们就不需要在引入时候加上.default,而是加上.model。
- 但是我们Money页面用ts写的，为何model文件不能用ts写呢，所以我们改写成model.ts，这就涉及到需要变量声明，有一些变量需要编程全局的变量，如图片中的type Record，我们需全局声明它，但Record是一个默认就有的类型，我们自己定义的类型不能相同，需要换个名字。
其次，我们需创建一个custom.d.ts，d就是declaration，只要typescript发现是.d.ts结尾的就知道你是声明。把type Record内容复制过去就可以。
21..native用法
在抽离一个Button组件时，别处引用这个Button组件时，若想绑定一个监听一个行为，通常我们会这样写：
//Button.vue<button class="button"@click="$emit('click', $event)"><slot/></button>//Labels.vue<Button class="createTag" @click="createTag">新建标签</Button>//但若需要绑定的行为很多呢？不止点击，怎么办？//可以这样写//Labels.vue<Button class="createTag" @click.native="createTag">新建标签</Button>
- Vuex ——全局数据管理 ```javascript //初始化store/index.ts import import Vue from ‘vue’ import Vuex from ‘vuex’
Vue.use(Vuex)//别忘引入
const store = new Vuex.Store({ state:{ count:0, tagList:[], }, mutations:{ addCount(state){state.count += 1} //mutations里面的函数没有返回值！！ }
})
组件使用时,```javascript//读：对象computed: {tagList(){return this.$store.fetchTag()}}//读：类export default class Tags extends mixins(TagHelper){get tagList(){return this.$store.state.tagList;}//更推荐使用下面这种方法
更推荐使用get 方法，因为当类里面需要引用组件里的computed的属性时，是无法使用读取的
- Vue的/deep/用法
```javascript
//当statistics页面要用到某一个type组件时，
//于是我们需查文档发现还有一种写法，非常高兼容性
//成功
```
若有收获，就点个赞吧
0 人点赞
