vue-cli
vue-cli是vue开发的脚手架
安装
- 首先看看是否已经安装过了
npm list -g vue-cli
- 如果已经安装了低版本的话，卸载
npm uninstall vue-cli -g
- 全局安装
npm install -g @vue/cli
- 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。（例如 vue --version）
注意
- vue-cli2和vue-cli3的模块名字不一样。vue-cli3有了scope了。scope说明
创建项目
- 执行以下命令创建
vue create hello-world
image.png
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性
上面的配置选择完之后，一个简单的vue项目就创建成功了。这个时候你在命令行cd hello-world，进入到hello-world项目根路径下，命令行敲下npm run serve，项目就开始跑起来啦
也可以使用ui方式创建项目
vue ui
image.png
目录层次
image.png
- public目录放置ico以及你的index.html
- assets目录：放置静态文件，例如：图片，js，svg的js等等啊，这个目录下的文件在生产环境下会被webpack copy
- components目录：放置公用vue组件页面
- views目录：登录页，首页，注册页等等。
- vue.config.js
端独立开发有个跨域问题，之前vue-cli2的proxy-table等配置在vue-cli3中这里配置。
// vue.config.js
module.exports = {
// 选项...
baseUrl:"./",
outputDir:"dist",
assetsDir:"assets",
indexPath:"index.html",
filenameHashing:true,
pages:undefined,
lintOnSave:true,
runtimeCompiler:false,
transpileDependencies:[],
productionSourceMap:false,
crossorigin:undefined,
integrity:false,
devServer:{//代理
port:8086,
proxy:'http://192.168.255.201:8082'
}
}
