vue项目的创建（二）

最新推荐文章于 2023-10-22 21:45:01 发布

菜不菜谁知道

最新推荐文章于 2023-10-22 21:45:01 发布

阅读量291

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/zhou_ya_nan/article/details/116486669

版权

本文详细介绍了如何在Windows上使用PowerShell创建Vue项目，包括选择 preset、配置路由、CSS预处理器和linter，以及项目目录结构和Vscode的使用。重点讲解了手动配置过程和关键步骤。

摘要由CSDN通过智能技术生成

vue项目的创建（续）

首先确保你的powershell,安装成功，其次是，要了解powershell和cmd的区别，cmd只是执行对应的代码命令，但是powershell是面向对象的，这就意味着功能更加强大，基于.net去开发的，所以还是装一个powershell比较ok,准确来说就是powershell能做的，cmd,不能做，cmd不能做的，powershell还可以

一.搭建项目

安装好powershell之后，就开始，编辑命令行，按住shift+右键，打开命令面板，接下去就是创建新的项目。

//创建一个新的项目
   这里是输入的命令 vue create big
    //这里是下一步的提示
    ——————————————————————————————————————————————————————————————————————————————————————————
    Vue CLI v4.3.1
┌──────────────────────────────────────────┐
│                                          │
│   New version available 4.3.1 → 4.5.12   │
│     Run npm i -g @vue/cli to update!     │
│                                          │
└──────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
   default (babel, eslint)
 > Manually select features
  ——————————————————————————————————————————————————————————————————————————————————————————————
 接下去一般的选择都是标准，可以手动配置想要的路由。
 ? Please pick a preset: Manually select features
 ? Check the features needed for your project:
 (*) Babel   //这里可以将ES6转换成ES5或者2.3
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support//渐进式app,可以让项目离线访问，
 (*) Router
>(*) Vuex
 (*) CSS Pre-processors   //这里就是less和sass的配置
 (*) Linter / Formatter  //这里是格式化的校验
 ( ) Unit Testing
 ( ) E2E Testing  
 ————————————————————————————————————————————————————————————————————————————————————————————————  
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? 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   
  //这里就是选择使用sass或者less，我一般习惯使用less（相对比较简单）
   后期我会出一篇说明sass和less的区别，相对比较的详细        
   —————————————————————————————————————————————————————————————————————————————————————————————————
   ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier           
  //这里选择标准的
  ———————————————————————————————————————————————————————————————————————————————————————————————
   (*) Lint on save     //保存的时候校验
  >(*) Lint and fix on commit        //提交代码的时候校验
  ——————————————————————————————————————————————————————————————————————————————————————————————
  ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files //配置文件生成单独文件
  In package.json  
  接下去就是开始安装文件的时候了  
  ————————————————————————————————————————————————————————————————————————————————————————————
  看到这段代码基本就成功了
  $ cd big
  $ npm run serve

PS C:\Users\Administrator\Desktop\demo>    

——————————————————————————————————————————————————————————————————————————————————————————————
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.16.8.82:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
  这样你在本地的服务器就搭建完成。 http://localhost:8080/输入这个就可以打开地址