注意博客时间,小心因版本问题踩坑。
创建(以下操作均在DOS下运行)
Vue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。
vue.js官网安装Vue CLI:https://cli.vuejs.org/zh/guide/installation.html
npm install -g @vue/cli //-g表示全局安装
# OR
yarn global add @vue/cli
vue --version //查看安装版本(显示版本即安装成功)
项目创建
vue create app01 //app01 即 项目名称
//项目位置为当前命令执行的目录
创建:在D:\vue目录下创建项目名为app04的vue项目
选择默认或者自选(上下键选择,回车进行下一步)
选择Manually selecct features
,默认已选中Babel
和Linter / Formatter
(上下键选择,空格可选中或取消,回车进入下一步)
配置信息放入 In package.json
创建过程中有一些Y/N的选项,可自行判断进行选择
出现如下所示,即为创建成功;在app04下执行:npm run serve
即可启动项目
项目目录:(app04项目中会默认生成.git文件,上传到GitHub时存有依赖的node_modules文件
不会上传,从GitHub中下载后需手动导入依赖。安装依赖:npm/cnpm install
)
启动成功
访问页面:
打包
npm run build //打包,在node_modules文件同级目录下运行
// 打包完成后会出现一个dist文件夹
/*
将dist文件夹部署到云服务器,访问方式
ip/dist/index.html
ip/app02/index.html
*/
注意:如果打包后无法加载script,则需要删除dist文件夹,在项目根目录下新建vue.config.js文件,内容为
module.exports = {
publicPath:'./'
}
然后重新打包
推荐博客:搭建脚手架并快速创建Vue项目