vue项目的创建（二）

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/输入这个就可以打开地址
                                                                                                                                                                                                                  

以上就是搭建结构的时候才会使用到的东西。（当然这是单页面的开发）
基本就进入了对应的项目页面
最后的文件夹就是这个样子

二.项目的目录规则（我选用的是Vscode）

上面的目录是一般通常的目录，目录也是有规则的，什么规则呢？

1.首先需要知道public用于存放公共的文件夹，里面一般是js文件，*在index.html中用script标签引入（一定要用原生的引入，不然打包可能会出错！！），*在需要的页面使用就可以了，具体如下：
2.在此之前，需要吧对应的项目不需要的都清除和清理干净。