Vue 注意事项

vscode中的vue文件中emmet进行tab键不起作用

见：https://code.visualstudio.com/updates/v1_10#_vue

vscode现已取消 .vue 文件与 HTML 的默认关联，需要手动配置。

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
}

vuejs webpack模板里import路径中@符号是什么意思

@是webpack的路径别名，相关定义：

/build/webpack.base.conf.js

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

vue 路径上的#怎么去掉

对于vue开发的单页面应用，我们在切换不同的页面的时候，可以发现html永远只有一个，这也真是称之为单页面的原因。

而vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。而对于正常的页面来说，更换url一定是会导致页面的更换的， 只有更换url中的查询字符串和hash值得时候才不会重新加载页面。

如果不想要，可以使用路由的history模式。这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。

==警告==

history模式需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。

为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
或者，如果你是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

vue使用scss

$ npm install -save-dev sass-loader node-sass

scss加载失败

Module build failed: Error: ENOENT: no such file or directory, scandir 'F:\study\blog\node_modules\node-sass\vendor'

$ npm rebuild node-sass

Vue提示warn：”[vue-router] Named Route ‘home’ has a default child route…”

在Vue的项目中使用了Vue-Router，当某个路由有子级路由时，父级路由需要一个默认的子路由，所以父级路由不能定义==name==属性

export default new Router({
  routes: [
    {
      path: '/',
      <!--name: 'home',-->
      component: Home,
      children:[
        {
          path:'/',
          name: 'console',
          component: Console,
        }
      ]
    }
  ]
})