1.Vue-cli:
Vue-cli 是专门搭建 vue 开发环境的脚手架;
vue-cli这个构建工具大大降低了webpack的使用难度,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就可以。
2.安装 Vue-cli:
(1)使用npm(需要安装node环境)全局安装webpack打开命令行工具输入:npm install webpack -g或者(npm install -g webpack)
(2)安装完成之后输入 webpack -v,如下图,如果出现相应的版本号,则说明安装成功。
(2)安装vue-cli:npm install -global vue-cli
(3)检测是否安装成功,查看版本:vue -V
3.创建项目:
(1)vue create 自己的项目名称(完成之后会生成含有自己项目名称的文件夹,注意不能使用大写);
(2)跳转的自己的项目文件夹中:cd 项目名称;
(3)安装所有的插件:npm install;
如果是安装具体的哪个个模块,在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装(这个文件里面是不允许有任何注释的),每个使用npm管理的项目都有这个文件,是npm操作的入口文件。因为是初始项目,还没有任何模块,所以用npm install 安装所有的模块。安装完成后,目录中会多出来一个node_modules文件夹,这里放的就是所有依赖的模块。
(4)写完自己的项目之后,进行打包:npm run build(会生成一个 dist 文件夹(需要上线的文件夹),会将自己写的所有 js 文件合并在一个 build.js 中);
注意,自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后,可以输入 npm run build 来进行打包工作。
另:
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看。
项目上线时,只需要将 dist 文件夹放到服务器就行了。
(5)最后运行服务:npm run dev;
4.路由:
直接在vue的项目中根目录中安装 命令:vue add router(安装过程中会提示,是否在路由中使用历史模式