vue环境搭建

安装运行环境

大概的步骤

1.环境搭建看上面的
2.搭建好了之后开始创建工程 cd 到一个创建好的文件夹
3.vue init webpack myprojectName[项目名称] 耐心等待
4.Project name 项目名称，可以自己指定
5.Project description (A Vue.js project)  项目描述，也可直接点击回车，使用默认名字
6.Author (........)       作者，不用说了，你想输什么就输什么吧
7.接下来会让用户选择
8.Install vue-router? (Y/n)    是否安装vue-router，这是官方的路由，大多数情况下都使用
9.Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的
10.Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试，我选择安装
11.Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 ，我选择安装
12.执行npm install
13.执行 npm run dev 开始运行我们的项目

上面是测试阶段 我们 使用note.js作为服务器打开我们的页面

打包

>1. 需要修改config/index.js. [记得修改build里面的他在下面而不是上面的dev里面的]里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./
>2. npm run build 
>3. 在从dist根目录打开index文件就可以访问了

目录结构解析

bulid   里面是一些操作文件，使用npm run *    时其实执行的就是这里的文件
config 配置文件，执行文件需要的配置信息
src   资源文件，所有的组件以及所用的图片都是在这个放着的简单看一下这个文件夹下都放了那些东西
assets  资源文件夹，放图片之类的资源
components  组件文件夹，写的所有组件都放在这个文件夹下，现在有一个写好的组件已经放到里面了
router  路由文件夹，这个决定了也面的跳转规则，App.vue应用组件，所有自己写的组件，都是在这个组件之上运行了
main.js    webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件，可以再项目中build\webpack.base.conf.js第12行看到这个入口文件是哪个
node_modules文件夹，这里放的就是所有依赖的模块

WebStorm配置Vue开发环境

1.点击Plugins设置插件:搜索Vue.js插件进行安装
2.配置Vue模板