新建并运行第一个Vue项目

0、环境要求

基本环境要求：node、npm

1、新建Vue项目并运行

npm install -g vue-cli          //全局安装vue-cli
vue init webpack project-name   //创建一个基于"webpack"模板的新项目
npm install                     //安装所有依赖的库
npm run dev                     //运行，默认需要8080端口

2、项目目录结构介绍

1、src/assets：存放静态文件，一般是组件中用到的文件，如图片，自定义的样式等
2、src/components：存放所有的组件
3、src/router：存放路由
4、src/App.vue：页面整体结构，整体布局就靠它了
5、static文件夹：存放静态文件，一般是一些官方的文件，如bootstrap、jquery等
6、src/main.js：项目入口
7、index.html：一般对static中文件的引用都放在里面

3、引入JQuery库

JQuery是很重要的库，但是VUE对JQuery貌似并不友好，如果想要在全局使用JQuery语法，需要配置JQuery相关信息，步骤如下：

1、修改package文件

找到package.json文件
添加"jquery":”版本号“
命令行执行npm install命令，安装jquery

2、修改bulid/webpack.dev.conf.js文件

//找到plugins，在里面加入下面代码
plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
]

3、修改main.js入口文件，导入jquery

4、修改.eslintignore文件

命令行执行npm run dev            //此时会警告$未被使用，而这个问题是可以忽略的
找到.eslintignore文件，添加*.*   //添加完后重新运行，就不会报上面的警告了

5、接下来你就可以在全局任何文件中通过$来使用jquery了

4、项目中添加组件

1、公用组件

1.1 在src/components里面添加headerBar.vue文件，并编写相应代码

1.2 在src/App.vue里面引入组件，并使用组件

1.3 效果，我们看到在最下面出现了hello，I am a header字样，组件使用成功

2、动态路由组件

2.1 进入src/router/index.js，在顶部import引入组件，并在conponents中添加组件

routes：路由对象数组
path：路由地址
components：组件集合，格式为  组件对外名：组件名

2.2 在App.vue里面通过以下形式调用组件，name默认为‘default’

<router-view name='con1'></router-view>