likes
comments
collection
share

[Vue篇] 保姆级搭建Vue项目教程!!

作者站长头像
站长
· 阅读数 27

创建一个vue项目首先要有环境,我们需要什么工具呢,如下

nodejs
vue-cli

如果有以上的工具就直接跳过安装教程。无的话跟着安装

一、 nodejs

1、 去官网下载nodejs安装包,https://nodejs.org/en/,根据自己电脑去选要按照的版本,这里就不介绍了。安装也是一路next,安装到自己想要安装的位置。 [Vue篇] 保姆级搭建Vue项目教程!!2、 配置环境变量,开始菜单搜“环境变量”=》双击path=》新建=》node安装路径(根据自己实际情况来)[Vue篇] 保姆级搭建Vue项目教程!! [Vue篇] 保姆级搭建Vue项目教程!!3、 win+R输入cmd查看是否安装成功。(node -v npm -v) [Vue篇] 保姆级搭建Vue项目教程!!

二、 使用淘宝镜像(这样下载包的速度会快点)

运行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org [Vue篇] 保姆级搭建Vue项目教程!!这样回头安装包的时候直接用cnpm就行了。

三、 安装vue-cli

1、cnpm install vue-cli -g //全局安装 vue-cli如果没用淘宝镜像就是npm install vue-cli -g 2、查看是否安装成功 [Vue篇] 保姆级搭建Vue项目教程!!

四、 创建vue项目(方法一)

选择一个位置,你要存放项目的路径,然后在此位置上cmd1、 首先安装vue/cli-init 为啥我下面是npm呢因为我安装的时候没装镜像,根据自己实际情况来就好。我下面就报错了,我就安装一下就好了[Vue篇] 保姆级搭建Vue项目教程!!2、 vue init webpack ”项目名称“ [Vue篇] 保姆级搭建Vue项目教程!!

3、 安装成功 [Vue篇] 保姆级搭建Vue项目教程!![Vue篇] 保姆级搭建Vue项目教程!!切换到项目目录然后运行 npm run dev。就ok了

项目目录: [Vue篇] 保姆级搭建Vue项目教程!!

五、 创建vue项目(方法二)

1、 vue create 项目名 [Vue篇] 保姆级搭建Vue项目教程!!

Default([Vue 3] babel, eslint)表示以Vue3为基础的模板,带eslint检查Default([Vue 2] babel, eslint)表示以Vue2为基础的模板,带eslint检查Manually select features 自定义配置

注意:空格键是选中与取消,A键是全选 [Vue篇] 保姆级搭建Vue项目教程!!

TypeScript 支持使用 TypeScript 书写源码Progressive Web App (PWA) Support PWA 支持。Router 支持 vue-router 。Vuex 支持 vuex 。CSS Pre-processors 支持 CSS 预处理器。Linter / Formatter 支持代码风格检查和格式化。Unit Testing 支持单元测试。E2E Testing 支持 E2E 测试。( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。( ) TypeScript // TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行( ) Progressive Web App (PWA) Support// 渐进式Web应用程序( ) Router // vue-router(vue路由)( ) Vuex // vuex(vue的状态管理模式)( ) CSS Pre-processors // CSS 预处理器(如:less、sass)( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)( ) Unit Testing //单元测试(unit tests)( ) E2E Testing // e2e(end to end) 测试(按需所取) [Vue篇] 保姆级搭建Vue项目教程!!这些配置都按照自己的需求来,下一步细节配置,下图是我根据我的需求选的。 [Vue篇] 保姆级搭建Vue项目教程!! [Vue篇] 保姆级搭建Vue项目教程!!

补:如果第一步全选话会出现以下选项

Use class-style component syntax? (Y/n):是否使用class风格的样式语法(TypeScript)Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) :是否使用class风格的组件语法(TypeScript) yesUse history mode for router? (Requires proper server setup for index fallback in production) (Y/n):是否使用history模式Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):选择预处理的模式( )Sass/SCSS (with dart-sass)( )Sass/SCSS (with node-sass)( )Less( )StylusPick a linter / formatter config: (Use arrow keys):选择语法检测规范( )TSLint( )ESLint with error prevention only( )ESLint + Airbnb config( )ESLint + Standard config( )ESLint + PrettierPick additional lint features: (Press to select, to toggle all, to invert selection)选择 保存时检查 / 提交时检查(*) Lint on save( ) Lint and fix on commit引用Pick a unit testing solution: (Use arrow keys) :测试方式( )Mocha + Chai( )Jest引用Pick a E2E testing solution: (Use arrow keys) :e2e测试方式( )Cypress (Chrome only)( )Nightwatch (Selenium-based)引用Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)选择配置信息存放位置,单独存放或者并入package.json( )In dedicated config files( )In package.jsonSave this as a preset for future projects? (y/N) :是否保存当前预设,下次构建无需再次配置

完成 [Vue篇] 保姆级搭建Vue项目教程!!进入路径运行项目 [Vue篇] 保姆级搭建Vue项目教程!!在网页打开 [Vue篇] 保姆级搭建Vue项目教程!!

参考文章:https://www.jianshu.com/p/02b...https://blog.csdn.net/fvf4515...