vue用vue-cli如何创建自己的项目以及手动安装勾选配置

vue用vue-cli如何创建自己的项目以及手动安装勾选配置

npm uninstall vue-cli -g //全局安装脚手架
vue -V //查看自己的vue版本号
vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

一、cnpm instal -g @vue/cli (一次全局安装sudo)
cnpm install -g @vue/cli -g @vue\
npm install -g @vue/cli    //升级3.0/cli -g @vue/cli
1 vue create myVue

(如果想选默认可以一直回车即可,接下来讲的是手动选择)

2Manuall select features
（常用的选择1.Bable、2. Router、 3.Vuex 、4.CSS Pre-processors、  5.Linter/ Formatter）

注意：

Sass/SCSS(with node-sass)和Sass/SCSS(with dart-sass)
node-sass是自动编译实时的，dart-sass需要保存后才会生效
Eslint +standard config

安装的时候node-sass这个包经常报错需要单独处理，
解决： 用cnpm install再来一遍   安装报错去本地删除node-modules文件夹  执行cnpm  i 命令重新下载
In dedicated config files(在专用配置文件中）
In package.json放在package.json里）



eslint:
npm run lint(代码检测工具（会自动修复）)
eslint中注释掉它的方法.eslintrc.js中

二、安装第三方插件
1.安装axios
(1) cnpm install axios --save
(2)在main.js中配置模板
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)
注：vue-axios只是帮你在axios上面再封装了一层，让axios可以直接和Vue组装起来。
vue-axios就是在axios写了一些vue的调用方法，如果你不想看axios api，你就直接用vue-axios封装好的函数
【Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
 】

       
2安装mintUI (cnpm install --save mint-ui)  安装
cnpm install --save mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
3elemUI组件安装
 cnpm i element-ui -S
cnpm install element-ui --save
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

elementUI   i-view
3，安装mock
 1. cnpm install mockjs --save-dev
2.在main.js中引入mock.js
三、注意
--save || -S // 运行依赖（发布）
–save-dev || -D //开发依赖（辅助）
sass less 预编译语法
区别是它们会把依赖包添加到package.json 文件
–save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
–save-dev ： devDependencies 键下，开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它，而只是在我们开发才用到它。
Instructor

vue用vue-cli如何创建自己的项目以及手动安装勾选配置

猜你喜欢