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 本地文件夹名称

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

vue项目的新建和打包_第1张图片

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

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

vue项目的新建和打包_第2张图片

都说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三个文件放在服务器环境路径下运行

你可能感兴趣的:(vue项目的新建和打包)