客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
vue 的火热程度毋庸置疑，vue3.0+typescript更是将vue玩出新高度。让编码变得更加规范化；
废话不多说，下面开始撸码；先附上vue3.0文档https://cli.vuejs.org/zh/guide/ 安装Vue CLI脚手架Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 npm install -g @vue/cli # OR yarn global add @vue/cli 安装完成后可通过 vue -V 查看版本
构建项目你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。默认是没有ts，所以我们要选择第二个来自定义我们所需要的； ? Please pick a preset: default (babel, eslint) //默认配置 > Manually select features //手动选择
接下来就是选择我们所需的选项来生成项目，使用 空格键 选中 ? Check the features needed for your project: (*) Babel // javascript转译器 (*) TypeScript // 使用 TypeScript 书写源码 ( ) Progressive Web App (PWA) Support // 渐进式WEB应用 (*) Router // 使用vue-router (*) Vuex // 使用vuex (*) CSS Pre-processors // 使用css预处理器 >(*) Linter / Formatter // 代码规范标准 ( ) Unit Testing // 单元测试 ( ) E2E Testing // e2e测试
是否使用Class风格装饰器？ 即原本是： ? Use class-style component syntax? (Y/n) N
使用Babel与TypeScript一起用于自动检测的填充 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi lls, transpiling JSX)? (Y/n) Y
路由模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
我选择 Sass/SCSS (with dart-sass) ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) > Sass/SCSS (with dart-sass) // 保存后编译 Sass/SCSS (with node-sass) // 实时编译 Less Stylus
选择 代码格式化检测 因为是用typescript 所以选择 TSLint ? Pick a linter / formatter config: (Use arrow keys) > TSLint // typescript格式验证工具 ESLint with error prevention only // 只进行报错提醒 ESLint + Airbnb config // 不严谨模式 ESLint + Standard config // 正常模式 ESLint + Prettier // 严格模式
代码检查方式 保存检查
> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
文件配置，我选择配置在独立的文件中 ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro w keys) > In dedicated config files In package.json
保存上述配置，保存后下一次可直接根据上述配置生成项目，这里我就不保存了，有需要的同学可自行保存
ted config files ? Save this as a preset for future projects? (y/N) N
OK，等待项目加载各种包... 加载完毕 $ cd vue-ts $ npm run serve
这时我们的项目就已经生成并启动完成；默认是localhost:8080 看下项目目录结构 跟vue2.0相似又不大一样，有些同学会疑惑webpack配置哪去了？ vue自己封装了对应的webpack配置，那如果想要修改配置该怎么办，可自己添加配置文件，这里亦不做详解， 可参考文档 https://cli.vuejs.org/zh/config |
请发表评论