vue项目的新建和打包

一、新建：

可以使用原生的方法去做（虽然麻烦，但是可以很好地理解过程中的原理）

我比较懒，就直接使用脚手架生成啦

 

开始之前，首先了解一下，什么是脚手架？

vue-cli : vue脚手架，帮你提供好基本项目结果

其本身集成很多项目模板

1. simple 基本没有

2. webpack 可以使用（一般用于大型项目（包含Eslint检查代码规范，单元测试））

3. webpack-simple 个人推荐使用，没有代码检查

 

了解之后，我们就可以开始创建自己的vue项目啦

1. 安装vue命令环境：npm install vue-cli -g

2. 验证是否安装成功：vue --version ，出现版本号即可

3. 生成项目模板：vue init 模板类型 本地文件夹名称

（模板类型即是在simple、webpack、webpack-simple选择适合自己开发需求的，本地文件夹的名称即是你创建的项目名称，里面将生成你所要的项目结构)

4. 进入到生成目录里面：cd 本地文件夹名称

（此时你就可以看到一个完整的项目结构已经生成了）

5. 接下来你就可以把它丢在你的编译工具里尽情地开发撸代码了~

（最好在src目录下新建一个components文件夹放你写的.vue文件，js或者css这些可以按照自己的实际情况来弄就好了）

都说vue.js的响应式数据绑定会自动响应数据的变化情况的，你所作即时可以看到效果，那怎么运行自己的代码呢？

二、运行：

1. 下载依赖包：npm install

（什么是依赖包（node_modules）？自己可以再去了解一下吧，这里就不详细讲了）

2. 运行：npm run dev

(如果你想查看别人的vue作品，可能也是需要做两步喔)

三、打包：

1. 先去掉index.html文件里的 src="/dist/"的第一条斜线（解决找不到build.js的问题）

2. 去掉webpack.config.js中的配置publicPath:‘/dist/’的斜线（解决静态资源路径错误的问题）

3. 输入命令：npm run bulid

4. 将data、dist和index.html三个文件放在服务器环境路径下运行