stylus vue 报错_vue实战开发之创建项目

八月中秋白露，路上行人凄凉；小桥流水稻花香，日夜千思万想。心中不得宁静，清晨早念文章；十年寒苦在书房，方显才高智广。

今天开始我就给同学们分享如何使用vue开发项目。

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

本地安装vue-cli

#全局安装vue-clicnpm install -g @vue-cli

vue-V 查看vue版本号

使用vue-cli快速创建vue项目

1、vue create 搭建新项目

vue create  //文件名  不支持驼峰(含大写字母)

Default([Vue 2] babel, eslint)：vue2默认设置非常适合快速创建一个新项目的原型，没有带任何辅助功能的npm包

Default(Vue 3 Preview)([Vue 3] babel, eslint)：vue3默认设置非常适合快速创建一个新项目的原型，没有带任何辅助功能的npm包

Manually select features：自定义配置是我们所需要的面向生产的项目，提供可选功能的 npm 包

在这里我们选Manually select features按方向键 ↓直接enter

Choose Vue version 选择Vue版本

Babel 将es6 语法转换成兼容的 js

TypeScript 支持使用 TypeScript 语法来编写代码

Progressive Web APP(PWA) Support PWA 支持

Router vue 路由配置插件

Vuex vue 程序状态管理

CSS Pre-processors css 预处理

Linter / Formatter 代码风格检查和格式化

Unit Testing 单元测试

E2E Testing E2E 测试

选择vue版本

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)。

我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。

选yes的话需要服务器那边再进行设置。

我选择的是Sass/Scss(with dart-sass)

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。

提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

( ) Lint on save // 保存就检测( )Lint and fix on commit // fix和commit时候检查

建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。

> In dedicated config files // 独立文件放置  In package.json // 放package.json里

我选的是放在json里面

键入N不记录，如果键入Y需要输入保存名字。

等待创建项目

执行它给出的命令，可以直接访问项目