vue脚手架坏境配置及其创建和启动项目

 一、安装脚手架之前必须安装node 

            1.检测此电脑是否安装node-js   win+R ==> 输入指令 node -v

            2.如果出现不是内部指令则没有安装

            3.打开node官网，下载对应位数的node 

            4.一般安装在c盘当中

            5. 安装过程中会出现一个很长很长的单选框，勾上

            6.安装完成后会弹出一个对话框 直接关闭

            7.打开cmd 输入node -v  

            8.出现版本号的话说明已经安装成功

            9.再在对话框里输入npm -v，检测node包管理是否安装  安装node时自带

            10.安装cnpm(淘宝镜像) 指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

            11.安装完成后 输入 cnpm -v 检测是否安装成功

        二、安装脚手架

            安装vue脚手架之前，先安装好node环境！！!

            1. 安装webpack

                npm i webpack-cli -g    #全局安装, linux和Mac 需要加sudo

                webpack-cli -v          #安装后, 可查看版本

            2. Vue CLI 2.x

                2.1 安装

                    npm i vue-cli -g    #全局安装, linux和Mac 需要加sudo

                    vue -V             #查看版本号（大写V）

                2.2 创建项目

                    vue init webpack 项目名字

                创建项目时一些步骤选项

                    步骤1 项目名称

                        Project name vue-cli-2.x

                    步骤2 项目描述

                        Project description vue-cli-2.x demo

                    步骤3 项目作者

                        Author lanxy

                    步骤4 是否安装vue-router

                        Install vue-router? Yes

                    步骤5 是否添加ESLint 代码检查工具

                        Use ESLint to lint your code? Yes

                    步骤6 选择ESLint 检查模式 （步骤5不选时无步骤6） / 凯迪选择的是no

                        ? Pick an ESLint preset (Use arrow keys)

                        ❯ Standard (https://github.com/standard/standard) #标准配置

                        Airbnb (https://github.com/airbnb/javascript)   #Airbnb配置

                        none (configure it yourself)                    #自定义

                    步骤7 设置单元测试

                        ? Set up unit tests No

                    步骤8 e2e测试

                        ? Setup e2e tests with Nightwatch? No

                    步骤9 选择项目的包管理方式 npm /yarn

                        ? Should we run `npm install` for you after the project has been created? (recommended)

                        ❯ Yes, use NPM

                        Yes, use Yarn

                        No, I will handle that myself

                2.3 启动项目

                    进入创建的项目当中 cd+项目名称

                    npm run dev 启动项目

            3. Vue CLI 3.x/4.x

                安装Vue CLI 3.x/4.x 默认会覆盖Vue CLI 2.x的，所以安装时，如果以后不需要使用Vue CLI 2.x 那么需要把2.x版本先卸载掉, 如果还想同时使用，则可通过安装CLI的桥接工具来做兼容

                npm uninstall vue-cli #卸载Vue CLI 2.x

                或者安装桥接工具来兼容两者

                npm i -g @vue/cli-init #安装桥接工具 （linue和Mac 需要加sudo）

                3.1 安装Vue CLI 3.x/4.x （目前最新是4.x）

                    npm install -g @vue/cli #自动安装最新版本

                    或者 cnpm install -g @vue/cli (推荐使用)

                3.2 创建项目

                    vue create 项目名

                    创建项目过程步骤选项说明：

                    步骤1 选择预设配置，还是手动配置

                        ? Please pick a preset:

                        default (babel, eslint) #默认配置

                        ❯ Manually select features #选此项，进行手动配置

                    步骤2 选择添加的配置项（上下键可移动， 空格键选择或者取消选择）下面实心原点表示选中项

                        ? Please pick a preset: Manually select features

                        ? Check the features needed for your project:

                        ◉ Babel

                        ◯ TypeScript

                        ◯ 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） 测试

                    

                    步骤3  选择是否使用history router：Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

                        ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) #选n

                    步骤4 选中css预处理器

                        ? 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  #vue 一般搭配此项

                        Stylus

                    

                    步骤5 选择ESLint 的代码检测模式 (步骤2如果没有选Linter / Formatter项，则无步骤5和6)

                        ? Pick a linter / formatter config:

                        ESLint with error prevention only  #只有错误预防

                        ESLint + Airbnb config             #Aribnb配置

                        ❯ ESLint + Standard config           #标准配置

                        ESLint + Prettier                  #漂亮配置

                    

                    步骤6 ESLint 的检查时机

                        ? Pick additional lint features:

                        ◉ Lint on save             #保存时检查

                        ❯◯ Lint and fix on commit   #commit时检查

                    步骤7 选择如何存放配置

                        ? Where do you prefer placing config for Babel, ESLint, etc.?

                        In dedicated config files  #独立的文件放置

                        ❯ In package.json            #放到package.json中

                    步骤8 是否保存本次配置（保存之后在下次创建项目时即可选择预设置项）

                        ? Save this as a preset for future projects? (y/N)

                        # 如果选择了yes 最后会提示输入保存的名称，输入回车即可

                3.3 启动项目

                    npm run serve

 

全部操作已完成