Vue-cli

2017-07-28 本文已影响0人福兮祸所依

命令操作

安装脚手架(全局安装)：npm install vue-cli -g
初始化项目(创建项目)：vue init webpack 项目名称(不能是中文)，或vue init webpack .
进入工程项目：cd 项目名称
安装项目依赖(最好不要用cnpm)：npm install
安装 vue 路由模块vue-router和网络请求模块vue-resource(根据需要安装)：cnpm install vue-router vue-resource --save
启动项目：npm run dev ==> npm run dev命令实际上运行的是node ./build dev-server.js
修改端口运行(默认端口8080)：PROT=6666 node ./build dev-server.js
填坑(以下坑可能由于 vue2.0 导致其他相关编译打包工具没更新导致的)
这些坑是由于 npm 不是最新的版本3.10.2，用 npm 3.9.5就会出现以下坑。解决办法: 请运行以下命令:npm update -g

    报错==>
    Error: Cannot find module 'opn'
    Error: Cannot find module 'webpack-dev-middleware'
    Error: Cannot find module 'express'
    Error: Cannot find module 'compression'
    Error: Cannot find module 'sockjs'
    Error: Cannot find module 'spdy'
    Error: Cannot find module 'http-proxy-middleware'
    Error: Cannot find module 'serve-index'

若是是老版本的 vue-cli 还可能报其他错误，需要更新一下 vue-cli，执行命令：npm update vue-cli

之后可以查看一下当前全局 vue-cli 的版本，执行命令：npm view vue-cli

安装一下这个依赖到工程开发环境：
cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再启动项目，报错==>
    ERROR in ./src/main.js
    Module build failed: Error: Cannot find module 'babel-runtime/helpers/typeof'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    @ multi main
    ERROR in ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
    Module not found: Error: Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
    @ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
    @ ./~/.2.1.0-beta.8@webpack-dev-server/client?http://localhost:8080

安装一下 babel-runtime：cnpm install babel-helpers --save-dev

    启动项目，再次报错==>
    Module build failed: Error: Cannot find module 'babel-helpers'
    Module build failed: Error: Cannot find module 'babel-traverse'
    Module build failed: Error: Cannot find module 'json5'
    Module build failed: Error: Cannot find module 'babel-generator'
    Module build failed: Error: Cannot find module 'detect-indent'
    Module build failed: Error: Cannot find module 'jsesc'

找不到依赖那就再安装一下：
cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev
...不写了，请把全部把旧的环境全部清除，更新到最新版本

解决办法概述：
如果遇到Module build failed: Error: Cannot find module '模块名'
那就安装
cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)
比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
终于可以启动项目了
输入完命令会自动启动浏览器，如果默认打开 IE 不行 :npm run dev

脚手架目录结构说明

node_modules:整个项目以来的文件

build ：配置文件
    webpack.base.conf.js中的alias定义了import Hello from '@/components/Hello'中的@，就是src

config:配置文件

src:源码目录，开发代码(我们写的代码放在该文件夹里，其他的一般不动)
src/assets:放一些第三方库和静态资源文件
src/components:存放开发好的组件(重要)
src/router:路由配置文件夹
src/app.vue:整个项目的根组件
src/main.js:项目的js入口文件==>
    import Vue from 'vue'//导入vue模块
    import App from './App'//导入app.vue文件
    import router from './router'//导入router文件夹中的index.js
    
static:静态，放图片什么的
static/.babelrc:关于ES6的一些配置
static/.editorconfig:关于编辑器的一些配置
static/.gitignore:git版本管理控制工具忽略的文件(重要)
static/.postcssrc.js：浏览器前缀
    
index.html:项目入口

组件的使用：
1.使用import命令，将组件引入
2.在components中注册引入的组件
3.使用标签调用(标签使用驼峰写法)

注意点：
1.一个组件下只能有一个并列的 div
2.数据要写在 return 里面而不是像文档那样子写
错误的写法：
data: {
message: 'Hello Vue!
}
正确的写法：
export default {
data () {
return {
msg: 'Hello Vue!'
}
}
}

vue脚手架路由：

欢迎界面：http://localhost:8080/#/

路由相关：
    1.定义路由的跳转链接 <router-link to="跳到的位置" tag="以什么标签显示" active-class="路由激活时的类名"></router>
    2.路由激活后组件显示的位置 <router-view></router-view>
    3.跳到哪儿，显示什么？在路由的配置文件中定义
        .src/router/index.js

子路由(嵌套路由)：

路由参数：
    1.配置src/router/index.js文件
        {
            path:'/article/:index',
            component:Article
        }
    2.参数传递
        <router-link to="/article/12312">看文章</router-link>
        
        附加：<router-link v-for="(item,index) in list" :to="{path:'/article/'+index}">动态参数</router-link>
        
    3.在Article组件中得到参数数据
        this.$route.params.index
    
    小结==>
        12312这个数据会传给'/article/:index'中的index,
        this.$route.params.index中的index是读取'/article/:index'中的index

history历史模式：
http://localhost:8080/#/article
应该是去掉#,
添加mode: 'history'后，http://127.0.0.1:8080/article

Vue-cli

命令操作

脚手架目录结构说明

猜你喜欢

热点阅读