精华内容
下载资源
问答
  • 使用vue创建项目的详细步骤

    万次阅读 多人点赞 2020-03-26 18:31:35
    由于vue的安装与创建依赖node.js(JavaScript的运行环境)里的npm(包管理和分发工具),因此需要先确保安装node.js。 检测方式:打开cmd命令窗口(Window + R,输入cmd然后回车),输入 node ...

    一、前言

    1、本例环境

    node.js:v12.14.1

    npm:v6.13.4

    vue:@vue/cli 4.2.3

    2、node.js环境安装与测试

    由于vue的安装与创建依赖node.js(JavaScript的运行环境)里的npm(包管理和分发工具),因此需要先确保安装node.js。

    检测方式:打开cmd命令窗口(Window + R,输入cmd然后回车),输入 node -v 回车,正常显示node.js版本代表已安装。

    因为npm会随着node.js一起安装,所以,只要是node.js正常安装,就代表npm已经安装。

    检测方式:cmd命令窗口输入 npm -v 回车,能正常显示npm版本。

    没有安装的也不用担心,下载node.js安装包,然后一直“下一步”点下去就可以安装。

    下载地址:https://nodejs.org/zh-cn/

    二、安装vue脚手架:Vue CLI 

    官网:https://cli.vuejs.org/zh/

    按照官方文档说明,安装命令为“npm install -g @vue/cli”。然而,原生npm的下载速度,大家都懂的...

    因此,我们使用淘宝镜像来安装,命令:npm install -g @vue/cli --registry=https://registry.npm.taobao.org

    等个三分钟左右,安装完成。cmd命令窗口输入 vue -V(V大写) 回车,能正常显示@vue/cli版本。

    三、创建vue项目

    首先我们计划在D盘vueTest文件夹下创建项目,命令窗口输入 d: 回车,再输入 mkdir vueTest 回车创建 vueTest 文件夹,再输入 cd vueTest 回车进入 vueTest 文件夹下。

    1、vue create

    1.1.1、cmd命令窗口输入 vue create vueinit001 回车

    default (bable,eslint) // 默认

    Manually select features // 手动 **选择手动创建项目

    1.1.2、如果不需要太多功能的话可以选择快速创建。选择第一个直接回车,进行项目创建

    1.1.3、cmd窗口输入命令 cd vueinit001 回车进入 vueinit001 项目中,再输入 npm run serve 回车启动服务

    1.1.4、浏览器地址栏输入 http://localhost:8080/ ,正常打开网页表示项目创建成功

    1.2.1、cmd命令窗口输入 vue create vueinit002 回车

    1.2.2、这次我们选择手动创建项目,选择第二个回车(键盘上下键选择)

    1.2.3、选择自己需要的特性(上下键移动键,空格键是否选中,a 键切换选择所有,i 键反转选择选项),然后回车

    ( ) Babel                                                                      // 支持高阶语法转换

    ( ) TypeScript                                                            // 支持使用 TypeScript 书写源码

    ( ) Progressive Web App (PWA) Support           // 支持PWA

    ( ) Router                                                                    // 路由

    ( ) Vuex                                                                       // store

    ( ) CSS Pre-processors                                          // CSS 预处理器

    ( ) Linter / Formatter                                                // 代码风格检查和格式化

    ( ) Unit Testing                                                          // 支持单元测试

    ( ) E2E Testing                                                          // 支持E2E测试

    本次我们选择:Babel,Router,Vuex,CSS Pre-processors。

    至于代码格式化,现在的IDE开发工具中都有格式化插件,无需另行下载。

    1.2.4、这一步提示我们是否使用历史路由器,输入 n ,回车

    1.2.5、这一步提示我们在项目里面需要支持何种动态样式语言,我们选择第二个(上下键移动键),回车

    1.2.6、这一步提示我们选择配置文件的位置,因为每个插件都有自己单独的配置文件,我们选择第一个,回车

    1.2.7、这一步提示我们是否将当前配置选项保存起来,方便下次创建项目时使用。输入 n ,回车

    1.2.8、下载依赖包,创建项目

    1.2.9、cmd窗口输入命令 cd vueinit002 回车进入 vueinit001 项目中,再输入 npm run serve 回车启动服务

    1.2.10、浏览器地址栏输入 http://localhost:8080/ ,正常打开网页表示项目创建成功

    2、使用图形化界面

    2.1、打开cmd命令窗口,输入 vue ui 回车,启动图形化界面

    2.2、启动成功后,会自动打开图形化界面视图

    2.3、点击“创建”,进入项目创建页面

    2.4、默认是在C盘根目录下,选择自己想要创建项目的文件夹

    2.4.1、返回上一层:点击下图图标

    2.4.2、进入文件夹内:单击文件夹

    2.4.3、选择D盘:操作步骤如下

    2.4.4、新建文件夹:操作步骤如下

    2.5、点击“在此创建新项目”,进入创建新项目页面

    2.6、输入项目名(示例:vueinit003)

    2.7、包管理器,选择 npm

    2.8、下拉页面,初始化git仓库,默认选中,本次联系取消选中

    2.9、选择“下一步”,进入项目预设页面

    2.10、项目预设 设置,同上述的 1、vue create ,这里我们选择默认,点击“创建项目”

    2.11、项目创建中,同时命令窗口显示创建具体信息

    2.12、项目创建完成,会自动进入项目管理页面

    2.13、点击“任务”进入任务管理页面

    2.14、点击“serve”进入项目编译管理页面

    2.15、点击“运行”开始编译

    2.16、编译成功后,点击“启动app”,会自动打开项目

     

    3、拉取 2.x 模板 (旧版本)

    3.1、安装桥接工具

    依照官方文档说明,使用旧版本的 vue init 功能,需要安装一个桥接工具。同理,我们使用淘宝镜像。

    命令:npm install -g @vue/cli-init --registry=https://registry.npm.taobao.org

    3.2、在D盘vueTest文件夹下创建名为“vueinit004”的项目

    命令:vue init webpack 项目名

    3.3、确认项目名,直接回车

    3.4、项目描述,可不写,这里直接回车

    3.5、作者,可不写,这里直接回车

    3.6、vue的编译方式:运行环境 + 编译器;仅运行环境。这里我们选择第一个,回车

    3.7、是否下载路由,根据自个需求选择。这里不选择,输入 n ,回车

    3.8、是否使用ESLint美化代码,根据自个需求选择。这里不选择,输入 n ,回车

    3.9、是否使用单元测试,输入 n ,回车

    3.10、是否使用E2E测试,输入 n ,回车

    3.11、创建项目后的运行方式:npm;yarn;自行选择。这里我们选择npm方式,回车

    3.12、创建项目

    3.13、项目创建完成,输入 cd vueinit004 进入项目

    3.14、输入 npm run dev 启动项目,浏览器地址栏输入 http://localhost:8080 ,进入项目页面

    3.15、停止项目,安装项目依赖包

    命令窗口,Ctrl + C 出现终止操作提示符,输入 N 停止项目

    安装项目依赖包,同理,我们使用淘宝镜像。

    命令:npm install --registry=https://registry.npm.taobao.org

    安装成功后,项目文件夹内会生成一个名为“node_modules”的文件夹

    3.16、同 3.14:输入 npm run dev 启动项目,浏览器地址栏输入 http://localhost:8080 ,正常进入项目页面表示项目创建完成

    四、结尾

    上面详细说明了三种vue项目的创建步骤,个人更倾向于使用图形化界面创建,因为视图给人的感觉更直接,具体使用哪一种看个人习惯。

    展开全文
  • vue脚手架创建项目

    千次阅读 2019-12-08 11:24:55
    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置 安装vue 全局安装 npm install vue -g 局部安装 npm install vue 我这里采用的是全局安装 安装vue-...

    什么是脚手架(vue-cli)

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目以及更改对相应的webpack配置

    通过脚手架创建项目

    通过脚手架创建项目大致分为两类:一类是通过3.x版本的脚手架创建项目,一类是通过2.x版本的脚手架创建项目

    无论是通过 3.x 还是 2.x 版本的脚手架创建项目都需要安装脚手架

    脚手架的安装

    首先,先说明一下,如果我们安装的是脚手架 3.x 版本,那么我们也可以使用 3.x 的脚手架通过 2.x 的方式来创建项目,但是如果安装的是 2.x 版本的脚手架是不能通过 3.x 的方式创建项目的

    我这里安装的是 3.x版本的脚手架并且是全局安装

    1.安装3.x版本的脚手架

    npm install @vue/cli -g
    

    2.安装 2.x 版本的脚手架

    npm install vue-cli -g
    

    3.查看脚手架的版本

    vue -V
    

    这里给出的安装脚手架命令都是全局安装,如果不想全局安装的话就把每行命令后的-g去掉即可

    全局安装脚手架之后,以后如果再创建项目的话,就不需要再重新安装脚手架了

    3.x版本以上脚手架创建项目

    通过脚手架 3.x 版本 创建项目有两种方式,一种是在命令框中创建项目,一种是在图形化界面创建项目

    命令框创建项目

    1)输入创建命令

    vue create 项目名称
    

    2)选择 Manually select features点击回车
    选择特性以创建项目,简单点来说自己的项目需要什么特性(组件、Vuex等),就可以选择哪一个来进行创建

    3)选择特性
    按空格选择,前面有 * 号代表已经选择
    我这里只选择了 router,选择完成后点击回车

    4)是否选用历史模式的路由:n

    5) ESLint 选择
    选择ESLint + Standard config

    6) 何时进行 ESLint 语法校验
    选择 Lint on save

    7)babel,postcss等配置文件如何放置
    选择In dedicated config files(单独使用文件进行配置)

    8)是否保存为模板
    自己根据自己的情况决定,我选择 n
    在这里插入图片描述

    9)使用哪个工具安装包
    选择 npm进行安装

    安装完成之后会出现如下界面
    在这里插入图片描述
    按照命令执行即可,之后会出现下面两个 url 随便哪一个在浏览器窗口打开即可
    在这里插入图片描述

    使用 ui 界面创建项目

    1)输入命令

    vue ui
    

    2)进到如下界面创建项目
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    点击安装之后静待安装,安装完成之后执行如下操作
    在这里插入图片描述

    3.x 版本基于2.x的旧模板创建项目

    在前面我们已经安装了 3.x 版本,那么你就不能使用 vue-cli2.x 版本

    因为 3.x 和旧版使用了相同的vue命令,所以 2.x 被覆盖了,所以就不能使用2.x版本中的有些命令

    但是如果还然想使用 2.x 的vue init功能,那么此时就需要全局安装一个桥接工具

    npm install -g @vue/cli-init
    

    安装完这个我们就可以创建项目了

    1)初始化(创建)项目

    vue init webpack 项目名称
    

    此时会依次出现下面的内容

    项目名称
    ? Project name (vue)
    项目描述
    ? Project description (A Vue.js project)
    源码解析准备
    ? Vue build
      - Runtime+Compiler
      - Runtime Only
    是否安装路由
    ? Install vue-router?
    检验你的代码是否符合规范
    ? Use ESLint to lint your code?
    项目单元测试
    ? Set up unit tests (Y/n)
    自动化测试
    ? Setup e2e tests with Nightwatch?
    使用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
    

    我的选择
    在这里插入图片描述
    点击回车等待安装成功,安装成功之后根据提示执行命令,执行完,便可以在浏览器窗口输入给定的 url 查看效果

    两个版本项目目录的对比

    在这里插入图片描述
    通过对比会发现,3.x 少了许多的许多的配置文件的目录(build、config等),因为 3.x 可以在根目录下新建一个vue.config.js文件,所有的配置都会在这个文件里直接配置

    vue.config.js是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写

    详见 官网是如何描述的

    展开全文
  • PyCharm创建项目

    千次阅读 2019-09-16 18:02:30
    PyCharm创建简单项目 1、选择新建项目 如果在欢迎页面,直接选择第一个Create New Project 如果在其他项目里面,选择File -> New Project… 2、选择Python项目,且选择解释器 3、新建python文件。 4、输入文件...

    PyCharm创建简单项目

    1、选择新建项目

    如果在欢迎页面,直接选择第一个Create New Project
    在这里插入图片描述如果在其他项目里面,选择File -> New Project…
    在这里插入图片描述

    2、选择Python项目,且选择解释器

    在这里插入图片描述

    3、新建python文件。

    在这里插入图片描述

    4、输入文件名称

    在这里插入图片描述

    5、编写程序并运行。

    这里我写了最简单的一个打印 “Hello World!”

    print("Hello World!")
    

    在这里插入图片描述

    6、查看程序输出

    在这里插入图片描述

    展开全文
  • keil uVision4 创建项目

    千次阅读 2018-06-09 23:00:22
    keil uVision4 创建项目工具: keil uVision41.打开工具,新建项目2.选择芯片型号,导入对应的库3.添加文件进工程,编写代码4.编译时候,记得选择输出类型,板子烧写的是十六进制的编译文件,所以要设置输出类型5....

    keil uVision4 创建项目


    工具: keil uVision4


    1.打开工具,新建项目



    2.选择芯片型号,导入对应的库


    3.添加文件进工程,编写代码


    4.编译时候,记得选择输出类型,板子烧写的是十六进制的编译文件,所以要设置输出类型



    5.编译成功输出




    总结不好多多担待,文章只单纯个人总结,如不好勿喷,技术有限,有错漏麻烦指正提出。本人QQ:373965070



    展开全文
  • 【Laravel笔记】1. 创建项目

    千次阅读 2021-01-31 22:49:49
    3. 安装与创建项目 4. 编辑项目与插件安装 Laravel一般使用composer的方式安装。 composer是 PHP 的一个依赖管理工具。我们可以在项目中声明所依赖的外部工具库,Composer 会帮你安装这些依赖的库文件,有了它,...
  • express快速创建项目

    千次阅读 2019-01-16 21:49:24
    上述安装完后,在自己要创建项目的目录下打开cmd,我的目录是D:\Graduate  输入 express -e 项目名称 创建项目,如下:   就创建了一个名为demo的项目,再在VSCode编辑器中打开文件,执行 npm ...
  • vue利用vue ui命令创建项目

    万次阅读 多人点赞 2019-03-07 21:29:53
    vue的官方脚手架是vue-cli,但它已经很久没有大版本更新了,最近发布的vue-cli 3.x ,新增的...注意,vue-cli 3.x已经收归到vue项目下了,所以,直接输入 vue -h 可以看到: 此时我们运行命令 vue ui , 就会启动...
  • 使用umi脚手架 创建项目 详细教程

    千次阅读 2019-12-18 10:17:53
    首先全局安装umi 两种方式 yarn安装和npm安装 都需要全局进行安装 确保 node 版本是 8.10 或以上 yarn global add umi 或 npm i umi -g ...umi 通过create-umi 来提供脚手架能力创建项目有两种形式, 一...
  • vue开发使用vue-cli4.x创建项目详解

    千次阅读 2020-02-09 20:12:10
    版本更新后在创建项目上有所不同,这里做详细的步骤教程以及选项解释。 - 创建项目 vue create 项目名 - 选择配置 先无视第一项(我的个人配置,后面会讲到);一般有两项: default:默认配置(只有babel和eslint...
  • vue cli 4 +创建项目步骤

    千次阅读 2020-07-23 16:32:32
    1.创建项目开始,定义名称 vue create [appName] 例如创建一个名称为 testapp 的项目命令为 vue create testapp 2 选择配置类型 按方向键选择,按enter确认 第一个为默认配置,包含eslint 和 babel 第二个为...
  • Pycharm如何创建项目

    万次阅读 2020-09-15 17:31:19
    此模板将创建一个空项目。 第一步:如果您在欢迎屏幕上,请单击Create New Project。如果您已打开项目,请选择File | New Project。 第二步:PyCharm建议了几个用于创建各种类型应用程序的项目模板(Django,...
  • Vue UI 创建项目详细步骤

    万次阅读 2020-04-28 17:12:53
    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli ...在界面上可以看到第一个tab项目,点击创建这个tab ,可以来创建一个新的vue项目 ...
  • Vue创建项目步骤

    万次阅读 多人点赞 2019-09-23 10:24:30
    Vue框架使用vue简介MVVM的介绍vue项目步骤vue项目目录详解运行vue可以自动打开浏览器如何使用less写样式 vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层...
  • GitLab创建项目,上传项目

    万次阅读 2018-08-22 17:18:31
    1、点击“New group“创建项目组 2、填写基本信息,点击”Create group“完成创建组。 给组添加人员: 1、点击”Members” 2、添加人员 删除组: 1、点击“Settings” 2、点击”Remov...
  • Vue ui 创建项目出错

    千次阅读 2019-12-24 20:49:04
    用cmd输入vue ui创建项目,在浏览器自动打开后,最后点击创建项目,项目已经出现在文件夹中,但是项目目录里没有东西,浏览器中也没有出现项目仪表盘。 发现问题原来是cmd没有以管理员身份打开,哈哈哈哈哈 ...
  • vue-cli3快速创建项目

    万次阅读 多人点赞 2019-06-16 23:37:52
    vue-cli3快速创建项目 最近准备用vue-cli3写项目啦,之前也都是看看文档,直接引入官方的js,写写简单的demo,没有写过项目,从今天开始写学习VUE. 1.安装 文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至...
  • vue3创建项目

    万次阅读 2020-04-28 11:12:14
    vue3创建项目 vue create 项目名称 //回车 default默认配置,manually手动配置,如果选择默认一直回车即可,选择手动需要进行相应的配置如下图 根据自己项目需求选择相应的选项,空格选择,a全选 babel---...
  • sonarqube创建项目(project)

    千次阅读 2020-01-13 16:11:09
    这篇讲讲怎么创建一个项目(project) 首先在服务端启动sonarqube,按照我上篇文章给出的命令启动就可以了。 1.在客户端的浏览器里输入“服务端ip:9000”,我这里服务端ip是"192.168.122.192",浏览器就输入...
  • uni-app实战——创建项目、项目结构详解

    万次阅读 多人点赞 2019-08-26 10:37:07
    uni-app修炼之路(二)导语创建项目1.点击文件——>新建——>项目2.选择uni-app——>填写项目名称——>选择默认模板项目结构详述1.首先我们看一下[官方的解释](https://uniapp.dcloud.io/frame)2.创建...
  • Pycharm创建项目

    千次阅读 2019-02-14 18:11:15
    Pycharm确实是一个非常不错的Python开发IDE,尤其对于...2.Project Interpreter部分是选择新建项目所依赖的python库,第一个选项会在项目中简历一个venv(virtualenv)目录,这里存放一个虚拟的python环境。这里所有...
  • 使用vue-cli离线创建项目

    千次阅读 2018-12-21 15:03:53
    使用vue-cli离线创建项目 1、手动下载vue模板 2、将下载的模板压缩包解压,修改文件名为wepback并放入到C:\Users\自己电脑的用户名.vue-templates文件夹中 3、执行命令: vue init <template-name&...
  • 使用vue ui创建项目报错

    千次阅读 热门讨论 2019-12-10 09:54:29
    看了好多博客,都用vue ui来创建项目,我寻思着我也试试,试着试着报错了 1. 2. 3. 4.而且我得配置这块只有这个 5.我选择的是保存并创建项目 6.他就。。。报错了 不知道什么原因 踩坑日记 ...
  • 基于go mod模式创建项目

    千次阅读 2020-01-13 21:44:52
    问君能有几多愁?恰似一江春水向东流。...本文以两种办法介绍如何创建go mod项目。 go mod是时候用起来了! 目录 第1种:假如你一开始就用goland开启旅游之路 第2种:假如是在本地手动创建项...
  • 好久没有创建vue新项目了,今天创建了一个新项目,一运行 vue init webpack project_name 就卡住不动,换 vue create project_name 也是卡住不动,然后 命令行关都关不掉, 后来上网找,好多人说什么vue/cli版本的...
  • gitlab中创建项目组及项目

    千次阅读 2019-07-01 20:00:32
    1、进入gitlab中Groups下新增项目组 2、进入项目组编辑页 可见性 Private 私有权限,只有你自己或者组内的成员能访问 Internal 内部权限,所有登录用户都可以访问 Public 公开权限,所有人都可以访问 3、新增...
  • vue创建项目很慢

    千次阅读 2019-08-02 16:29:46
    今天刚升级了vue3.0,用vue create project 创建项目,结局发现一直卡在安装步骤,上网找了很多问题,网上说要不镜像源换成淘宝镜像源,可是明明我的镜像就已经是淘宝镜像源了 之后我就像或者不开淘宝镜像,开...
  • idea创建项目默认路径

    千次阅读 2020-01-04 16:47:55
    刚才电脑卡死了,就把idea关了,找到项目路径C:\Users\Administrator\IdeaProjects
  • 选择File->Settings 选中Plugins 勾选spring选项 如果没有 选择下方的 搜索后下载
  • gitlab创建项目及分支

    千次阅读 2019-09-18 05:24:22
    gitlab创建项目及分支gitlab对于代码版本的管理和控制,每个项目都有不同的分支。master分支是稳定版的分支,负责发行的。develop分支 :开发者在接到需求之后主要从事开发工作的分支。release分支:测试在接到测试...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,592,450
精华内容 1,036,980
关键字:

创建项目