博客

vue-cli使用方法：（nodejs6.0以上版本，npm3.0以上版本）

1 // install vue-cli 安装依赖包

2 npm install –g vue-cli

3 // 使用vue-cli初始化项目

4 vue init webpack my-project

5 // install dependencies and go!

6 //进入项目目录

7 cd my-project

8 //在项目中安装依赖包

9 npm install

如果安装时报如下错误，采用npm install phantomjs-prebuilt@2.1.14 –ignore-scripts解决



10 //运行项目

11 npm run dev

2.在建立项目的过程中，有进行选择的选项，可以选择Y或者N，这根据自己需要所选，不影响什么。

3.当执行完最后一步“npm run dev”的时候，就会自动在

http://localhost:8080

弹出刚才所建的项目

项目初始化完成后，讲讲遇到问题：

1、在index.html入口文件引入static文件中的静态资源文件时，如果使用相对路径并且引入路由，当第二次加载静态资源时会报错，找不到静态资源，发现资源路径错误，上代码：

路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import login from '@/components/login/login'
import firstIndex from '@/components/main/firstIndex'
import planList from '@/components/main/planList'
import listDetail from '@/components/main/listDetail'

//引起子页面，登录页面
import {logins} from './loginRouter.js'

Vue.use(Router)

let routes = [{
    path: '/Hello',
    name: 'Hello',
    component: Hello,
    children:[{
        path: '/firstIndex',
        component: firstIndex
    },{
        path: '/planList',
        component: planList,
        children:[{
            path: 'listDetail',
            component: listDetail
        }]
    }]
}]
let others = [ {
    path: '*',
    component: login
}]

const scrollBehavior = (to, from, savedPosition) => {
    return { x: 0, y: 0 }
}//默认回到顶部

routes = routes.concat(logins)//登录相关
routes = routes.concat(others)//其他默认跳到登录

export default new Router({
    mode: 'history',//添加路径中#忽略
    scrollBehavior,
    routes
})

入口文件错误引入静态资源：

<script src="./static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

入口文件正确引入静态资源：

<script src="/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

将 ./ 替换成 /

./ 是指用户所在的当前目录（相对路径）；

/ 是指根目录（绝对路径，项目根目录），也就是项目根目录；

对于hash模式，根路径是固定的，就是项目的根目录，但是history模式下，以 / 开头的嵌套路径会被当作根路径，所以使用“./”引入文件，就会找不到文件了，因为文件本身就是在项目根目录下的，并不在嵌套路径这个目录下，无论hash模式还是history模式，可以直接使用“/”从项目根目录引入静态文件。

2、初始化的项目经过自己的一点修改后怎么也运行不出来，不是代码层面的问题，可能是初始化项目时Use ESLint to lint your code? (Y/n) 这一步选了y，设置了eslint，代码严格模式，因为某个地方多了空格或少了空格，这时找到build文件下的webpack.base.conf.js，将下面代码注释就可以了：

rules: [
      //初始化项目的时候Use ESLint to lint your code? (Y/n) 这一步选了y，设置了eslint
      /*{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },*/
    ]  

如果项目需要ui框架，通过npm install安装相应的依赖包，项目中按照需要导入。