【vue学习】vue项目创建

2023-10-05 17:35:52

VUE项目创建：

一.前提条件：

1、node安装，下载地址为：https://nodejs.org/en/

2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

检查是否安装成功：

二、搭建vue项目环境

（如果已经下载vue,可以直接创建项目，如果对自己下载的vue版本不满意，需要先卸载vue，再进行安装）

vue卸载：

vue-cli(1.x或2.x)：npm uninstall vue-cli -g 或 yarn global remove vue-cli
cli3：npm uninstall -g @vue/cli 或 yarn global remove @vue/cli

vue查看：

vue --version 或 vue -V (V大写)

话不多说，正式开始------------------------------------------

步骤1.全局安装vue-cli

　　　--> 情况1.vue-cli(1.x或2.x)快速创建项目：

　　　　1.全局安装 npm install --global vue-cli；
　　　　2.查看版本/是否安装成功 vue -V；（2.xx）
　　　　3.在新文件夹下创建项目 vue init webpack‘project’；

? Project name (myApp)  --->项目名称（不能与创建项目名称相同）
 ? Project description (A Vue.js project)  ---> 项目描述 （可不填，默认A Vue.js project）
 ? ? Author (hbf <hbf@***.cn>) ---> 作者名称
 ? Vue build (Use arrow keys)  ---->build是项目打包时的命令，可通过上下键进行选择，通常选一
    Runtime + Compiler: recommended for most users     ---->翻译：运行时+编译器:推荐给大多数用户
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
   nder functions are required elsewhere        ---->翻译：仅限运行时:大约6KB的lighter min+gzip，但是模板(或任何特定于vue的HTML)只允许在.vue文件中使用——其他地方需要渲染函数
 ? Install vue-router? (Y/n) ---> 是否初始化路由，建议选y，路由是项目必备
 ? Use ESLint to lint your code? (Y/n) ---> 是否用ESLint来校验你的代码。（如果想代码更规范，可选，比如多一个或少一个空格，都是报警告信息）
 ? Set up unit tests (Y/n)  --->是否建立单元测试（感觉没太大关系，就没选）
 ? Setup e2e tests with Nightwatch? No  ---->用夜视器设置e2e测试（感觉没太大关系，就没选）
 ? ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  ---->是否创建完成后执行npm install(安装node-models），项目创建完成后必须安装，
 Yes, use NPM ---> 用npm 创建
  Yes, use Yarn    ---> 用yarn 创建（安装了yarn才能使用）
  No, I will handle that myself   ---> 自己创建

　　　--> 情况2.vue-cli3快速创建项目：可参考：https://www.jianshu.com/p/c028e4cfc8c8
　　　　条件：npm 更至最新 node >=8.9；
　　　　1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli；
　　　　2.查看版本/是否安装成功 vue -V；（3.0.0）
　　　　3.在新文件夹下创建项目 vue create‘project’；

? Please pick a preset: (Use arrow keys)  ---->首先就会有三个选项
 hbf (vue-router, vuex, babel, eslint) ---->之前创建项目时保存的
  default (babel, eslint) ---->默认的。所缺的插件可以后续用到了再安装，安装命令网上一搜一堆。
  Manually select features ---->自己选择 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)   ---->项目所需要的模块  （多选，通过上下键移动，空格键选择选项）
(*) Babel
 ( ) TypeScript    --->慎重选择，一种开发语言，不懂的千万不要选。
 ( ) Progressive Web App (PWA) Support  ---->渐进式Web应用程序(PWA)支持
 ( *) Router ---> 路由
 ( *) Vuex   ---> 状态管理器
 ( *) CSS Pre-processors  --->  css预处理器，如果用less，sess等，就要选啦
 () Linter / Formatter  --->代码校验
 ( ) Unit Testing  --->单元测试
 ( ) E2E Testing  --->单元测试

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y --->路由是否使用 history模式,看项目需求的，自己写着玩的项目就随便啦

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  --->上面选了css预处理器，下面就要选处理哪种。
 Sass/SCSS (with dart-sass)  ---> dart-sass没用过
  Sass/SCSS (with node-sass)  --->sess我们一般会用node-sass
  Less  （我选择的这个）
  Stylus 

? Pick a linter / formatter config: (Use arrow keys)  --->代码校验
 ESLint with error prevention only    --->ESLint只与错误预防
  ESLint + Airbnb config    --->
  ESLint + Standard config    --->ESLint + 标准配置
  ESLint + Prettier  （我选择的这个）  --->严格校验，

//下面的不是太懂其中奥妙，感觉不同选择直接没太大差别，随意选择吧。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ---> 选择额外的lint功能
(*) Lint on save
 ( ) Lint and fix on commit

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)    --->配置文件房子哪个文件里
 In dedicated config files
  In package.json   （选择这个）

? Save this as a preset for future projects? (y/N) N --->是否保存现在的配置，如果保存，下次就可以直接选择使用

等待创建就可以了。。。。

步骤2.创建完成后执行下面命令：

cd project

步骤3.安装依赖包

npm install 或 npm i
或
yarn

步骤4.运行项目：

npm run dev

恭喜你！！项目创建完毕

结束------------------------------------------

码农公寓

相关文章