vue-cli5.0脚手架的安装搭建和运行

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

安装:

打开放大镜输入cmd,跳出命令框

vue-cli5.0脚手架的安装搭建和运行_第1张图片

npm install -g @vue/cli

安装好后,查看是否安装成功

vue --version

创建项目:

在合适的目录下输入cmd,跳出命令框

vue-cli5.0脚手架的安装搭建和运行_第2张图片

//目录名不能出现大写字母不要使用驼峰
vue create 文件名 

vue-cli5.0脚手架的安装搭建和运行_第3张图片

回车后出现以下,根据项目选择。这里作者选择第三个,Manually select features自定义选择需要的配置

? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) //默认vue2模板
  Default ([Vue 2] babel, eslint) //默认vue3模板
  Manually select features //手动选择(推荐)

vue-cli5.0脚手架的安装搭建和运行_第4张图片


配置环节:

点击空格选择。回车是下一步,我们选择的配置如下

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection, and
 to proceed)
 (*) Babel //是否需要安装babel
 ( ) TypeScript //是否使用ts
>( ) Progressive Web App (PWA) Support //是否需要支持web app
 (*) Router //是否安装router
 (*) Vuex //是否安装vuex
 (*) CSS Pre-processors //css 预处理器选择
 (*) Linter / Formatter //校验规则选择
 ( ) Unit Testing //单元测试
 ( ) E2E Testing //端到端测试

vue-cli5.0脚手架的安装搭建和运行_第5张图片

 到了这里问的是选择vue3还是vue2。根据自己需求来,作者选的是vue2

? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x

vue-cli5.0脚手架的安装搭建和运行_第6张图片

然后,选择是否使用路由 history router是否路径带 # 号,建议选择 N,这样服务器不用进行配置

vue-cli5.0脚手架的安装搭建和运行_第7张图片

 这里是sass预处理器的选择,一般默认就行

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) 
> Sass/SCSS (with dart-sass) 
  Less
  Stylus

vue-cli5.0脚手架的安装搭建和运行_第8张图片

这里是 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,选择ESLint + Standard config

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

 然后代码校验是实时检测还是commit和fix检测,一般推荐默认

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection, and  to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

vue-cli5.0脚手架的安装搭建和运行_第9张图片

 到了这部基本快要完成了,意思是文件的配置放在package.json里还是放在vue.config里。一般选第一个,要是图方便简单选第二个

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //选择配置文件
> In dedicated config files //外部创建配置文件 例:vue.config.js/ts
  In package.json //在此文件内部配置

vue-cli5.0脚手架的安装搭建和运行_第10张图片

配置的最后一步,? Save this as a preset for future projects? (y/N)这里意思是以后创建vue项目是否就是默认这次配置了,N是 不记录,选择 Y 就是同意。如果想熟能生巧推荐选N,Y很适合小白

? Save this as a preset for future projects? (y/N) N

vue-cli5.0脚手架的安装搭建和运行_第11张图片


运行项目:

配置完成后,回车,就会自动加载安装vuecli

vue-cli5.0脚手架的安装搭建和运行_第12张图片

安装完成后会出现以下,意思是安装它说的这两个指令输入后,就可以运行了

 $ cd demo
 $ npm run serve

vue-cli5.0脚手架的安装搭建和运行_第13张图片

vue-cli5.0脚手架的安装搭建和运行_第14张图片

 输入回车后,在浏览器里的地址栏输入给的local地址再回车就运行成功~vue-cli5.0脚手架的安装搭建和运行_第15张图片

 vue-cli5.0脚手架的安装搭建和运行_第16张图片

 vue-cli5.0脚手架的安装搭建和运行_第17张图片

vue-cli5.0脚手架的安装搭建和运行_第18张图片


作者上一篇文章,

VSCode安装教程详细简单版_意初的博客-CSDN博客_vscode 安装教程作者安装的是system版本,user版等于是自己私用的版本,别的计算机帐户无法使用当前的.而system版本任何帐户都可以使用,这个是主要的区别,简单说是通用版,相对好装。在使用上基本没什么区别。...https://blog.csdn.net/weixin_43928112/article/details/125813377

你可能感兴趣的:(vue.js,javascript,前端,前端框架)