使用 vue-cli 构建单页面应用

 

// 安装npm以及脚手架：

// 1、暂时禁止mac总是更新brew，永久的话，可以把这句话加到~/.xxx，请去查。我没空查了。
export HOMEBREW_NO_AUTO_UPDATE=true

// 2、安装node，默认有了npm包管理工具
brew install node

// 3、安装全局淘宝的cnpm  -g表示全局安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 4、安装全局webpack
cnpm install webpack -g
 
// 5、安装全局vue-cli
cnpm install vue-cli -g

 

 

创建项目：

vue init webpack my-project    //创建一个单页应用
vue init webpack-simple my-project    //创建一个结构简单的单页应用

 

 会出现选项：

Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查js代码）：n
Set up unit tests（安装单元测试工具）：n
Setup e2e tests with Nightwatch（是否安装端到端测试工具）：n
Should we run npm install for you after the project has been created? (recommended)：回车。  

 

 

进入项目并运行项目：

cd my-project
npm install jquery --save  //安装依赖  --save--dev 是你开发时候依赖的东西，-–save 是你发布之后还依赖的东西。
npm remove qrcode  //卸载依赖
npm run dev  //运行开发环境
npm run build  //打包项目

 

 

——此时可以通过访问localhost:8080访问本项目了。

 

npm --save-dev和--save的区别：

--save：生产环境需要的库。比如jq，react，vue都需要放到这里面。存放在package.json的dependencies参数里。

--save-dev：开发环境所需依赖的声明(构建工具，测试工具) 。比如：babel，webpack，都放到当前目录。存放在package.json的devDependencies参数里。

 

常用的npm命令：

vue init webpack my-project     //创建一个单页应用
vue init webpack-simple my-project     //创建一个结构简单的单页应用
npm install 模块     //安装，不会写入package.json中，之后执行npm install不会自动安装该模块
npm install -g 模块名称      //全局安装一个模块
npm install 模块名称 –save     //安装一个项目依赖包，如vue、jq，写入package.json中的dependencies中
npm install 模块名称 –save-dev      //安装一个开发环境依赖包，如webpack，写入package.json中的devDependencies中 
npm install 模块名称@版本号 -save    //安装指定版本的依赖包 
npm list     //查看已安装的所有依赖包 
npm list -g    //所有的全局模块 
npm remove 模块名称    //移除指定模块 
npm remove -g 模块名称     //移除指定的全局模块 
npm remove 模块名称 –save    //移除依赖，并从配置中删除 
npm remove 模块名称 –save-dev    //依赖依赖，并删除开发环境中的配置 
npm update 模块名称     //更新指定模块 
npm update -g 模块名称    //更新全局模块

 

 

// 重要的文件/目录：

src：开发目录，基本的代码都是在这里的。    <==最常用的就是这个：

asset：放切图目录

static：资源文件目录

App.vue：入口文件

main.js：核心文件，全局的配置都在这个文件里面配置

 

——main.js包含了核心框架文件Vue、路由配置文件router/index.js和App.vue ，路由index.js包含了各个组件。

 

配置路由示例：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import Test from '../components/Test.vue'

Vue.use(Router)

export default new Router({
    routes: [
        // 首页
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        // test页面
        {
            path: '/test',
            name: 'Test',
            component: Test
        }
    ]
})

 

 

// 页面跳转：

第一种（不建议使用）：使用<route-link>，无法跳转到上一页

<router-link to="/test">跳转到test界面</router-link>    //请注意，这个没有:
或者
<router-link :to="{name: 'Test',params:{a:1,b:2}}">跳转到test界面</router-link>

 

//第二种：页面跳转。例子为带参数并获取参数：

//方法一：
methods:{
    prev(){
    this.$router.push({name:'index',params:{a:1,b:2}})
    }
}
=>取值：this.$route.params.a

//方法二：拼接url，url的参数获取方式如下：
methods:{
    prev(){
        this.$router.push('/?a=1&b=2');
    }
}
=>取值：this.$route.query.a   (这个query是固定的)

 

—— 方法里面也可以写：this.$router.go(-1); 表示返回上一页。 

 

 

//首次进入就执行的方法：create或者mounted：

<script>
    export default {
        name: 'Index',
        data () {
            return {
                msg: 'Index界面'
            }
        },
        mounted(){
            $(".swiper-container").swiper({
                loop: true,
                autoplay: 3000
            });
        },
        methods:{
            getParam(){
                alert(this.$route.query.a);
            },
            getTest(){
                $.alert(222);
            }
        }
    }
</script>