关于vue.js:Vue篇-保姆级搭建Vue项目教程

63次阅读

共计 2532 个字符,预计需要花费 7 分钟才能阅读完成。

创立一个 vue 我的项目首先要有环境,咱们须要什么工具呢,如下

nodejs
vue-cli

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

一、nodejs

1、去官网下载 nodejs 安装包,https://nodejs.org/en/,依据本人电脑去选要依照的版本,这里就不介绍了。装置也是一路 next,装置到本人想要装置的地位。

2、配置环境变量,开始菜单搜“环境变量”=》双击 path=》新建 =》node 装置门路(依据本人理论状况来)


3、win+ R 输出 cmd 查看是否装置胜利。(node -v npm -v)

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

运行命令 npm install -g cnpm –registry=https://registry.npm.taobao.org

这样回头安装包的时候间接用 cnpm 就行了。

三、装置 vue-cli

1、cnpm install vue-cli -g // 全局装置 vue-cli
如果没用淘宝镜像就是 npm install vue-cli -g
2、查看是否装置胜利

四、创立 vue 我的项目(办法一)

抉择一个地位,你要寄存我的项目的门路,而后在此地位上 cmd
1、首先装置 vue/cli-init 为啥我上面是 npm 呢因为我装置的时候没装镜像,依据本人理论状况来就好。我上面就报错了,我就装置一下就好了

2、vue init webpack”项目名称“

3、装置胜利


切换到我的项目目录而后运行 npm run dev。就 ok 了

我的项目目录:

五、创立 vue 我的项目(办法二)

1、vue create 我的项目名

Default([Vue 3] babel, eslint)示意以 Vue3 为根底的模板,带 eslint 查看
Default([Vue 2] babel, eslint)示意以 Vue2 为根底的模板,带 eslint 查看
Manually select features 自定义配置

留神:空格键是选中与勾销,A 键是全选

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)测试
(按需所取)

这些配置都依照本人的需要来,下一步细节配置,下图是我依据我的需要选的。

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

Use class-style component syntax? (Y/n):是否应用 class 格调的款式语法(TypeScript)
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n):是否应用 class 格调的组件语法(TypeScript)yes
Use 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
()Stylus
Pick a linter / formatter config: (Use arrow keys):抉择语法检测标准
()TSLint
()ESLint with error prevention only
()ESLint + Airbnb config
()ESLint + Standard config
()ESLint + Prettier
Pick 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.json
Save this as a preset for future projects? (y/N):是否保留以后预设,下次构建无需再次配置

实现

进入门路运行我的项目

在网页关上

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

正文完
 0