前端_Vue

环境搭建:Windows 10 专业版 + Node.js + NPM + Google Chrome + $npm i -g @vue/cli </p>
项目创建:#vue create demo + $cd demo + $yarn serve + $vue ui </p>
项目结构
├── node_modules # 项目依赖包目录
├── public
│ ├── favicon.ico # ico图标
│ └── index.html # 首页模板
├── src
│ ├── assets # 样式图片目录
│ ├── components # 组件目录
│ ├── views # 页面目录
│ ├── App.vue # 父组件
│ ├── main.js # 入口文件
│ ├── router.js # 路由配置文件
│ └── store.js # vuex状态管理文件
├── .gitignore # git忽略文件
├── .postcssrc.js # postcss配置文件
├── babel.config.js # babel配置文件
├── package.json # 包管理文件
└── yarn.lock # yarn依赖信息文件
(1)Vue CLI 3 提供图形化界面,提供插件,Vue CLI有几个独立的部分组成:
CLI是一个全局安装的npm包,提供终端的Vue命令.
CLI服务是一个开发环境依赖,一个npm包,局部安装在每个@vue/cli创建的项目中,包含加载其他CLI插件的核心服务,一个优化过的内部webpack配置,项目内部的vu-cli-service命令,提供serve,build和Inspect命令.
CLI插件是向你的Vue项目提供可选的功能的npm包.
(1)起步
起步: $yarn global add@vue/cli $vue create vuecli $vue ui
(1)-1:快速原型开发,使用vue serve和vue build命令对单个*.vue文件进行快速原型开发,先$npm install -g @vue/cli-service-global
(1)-2:vue serve 命令可以在零配置下为.js或.vue文件启动一个服务器 $serve -o;打开浏览器 $serve -c; 将本地URL复制到剪切板 $serve -h;帮助 例子:$vue serve hello.vue
(1)-3:vue build $build -t;构建目标 $build -n;库的名字 $build -d;输出目录 $build -h;输出用法信息 例子:$vue vue build hello.vue
(2)插件和Preset
(2)-1:每个CLI插件都会包含一个(用于创建文件的)生成器和一个(用来调整webpack核心配置和注入命令的)运行时插件
$vue add @vue/eslint
(2)-2:Vue CLI Preset是一个包含新项目所需要预定义选项的插件的JSON对象,让用户无需在命令提示中选择它们.
(3)CLI服务:
(1)vue-cli-service serve –open 在浏览器启动时打开浏览器
(2)vue-cli-service serve –copy 在浏览器启东时讲URL复制到剪切板
(3)vue-cli-service serve –mode 指定环境模式(默认值development)
(4)vue-cli-service serve –host 指定host
(5)vue-cli-service build –mode 指定环境模式
(2) Vue Devtools