ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【vue学习】vue项目创建

2022-01-23 12:32:26  阅读:166  来源: 互联网

标签:npm --- vue 创建 学习 ---- 安装


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

 

恭喜你!!项目创建完毕

 

 

 

 

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

 

标签:npm,---,vue,创建,学习,----,安装
来源: https://www.cnblogs.com/gtea/p/15836111.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有