最早做淘宝客的网站,全球著名室内设计公司排名,泰州模板建站哪家好,找别人做网站注意什么目录 一、安装Vue CLI1.1 配置 npm 淘宝镜像1.2 全局安装1.3 验证是否成功 二、创建vue_test项目2.1 cmd进入桌面2.2 创建项目2.3 运行项目2.4 查看效果 三、脚手架结构分析3.1 文件目录结构分析3.2 vscode终端打开项目 一、安装Vue CLI CLI#xff1a;command-line interface… 目录 一、安装Vue CLI1.1 配置 npm 淘宝镜像1.2 全局安装1.3 验证是否成功 二、创建vue_test项目2.1 cmd进入桌面2.2 创建项目2.3 运行项目2.4 查看效果 三、脚手架结构分析3.1 文件目录结构分析3.2 vscode终端打开项目 一、安装Vue CLI CLIcommand-line interface 的简写
1.1 配置 npm 淘宝镜像
执行命令npm config set registry https://registry.npm.taobao.org然后关闭cmd窗口
C:\Users\nash_npm config set registry https://registry.npm.taobao.orgC:\Users\nash_1.2 全局安装
重新打开新的窗口cmd然后执行命令npm install -g vue/cli然后再关闭cmd窗口。
C:\Users\nash_npm install -g vue/cli
npm WARN deprecated source-map-url0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated apollo-datasource3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-errors3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated source-map-resolve0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated apollo-server-plugin-base3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-types3.8.0: The apollo-server-types package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated resolve-url0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated apollo-server-express3.12.0: The apollo-server-express package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated shortid2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated apollo-reporting-protobuf3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/usage-reporting-protobuf package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-env4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/utils.fetcher package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated subscriptions-transport-ws0.11.0: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated apollo-server-core3.12.0: The apollo-server-core package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This packages functionality is now found in the apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.changed 872 packages in 35s1.3 验证是否成功
再次重新打开cmd窗口此时输入vue就不会报错了。
C:\Users\nash_vue
Usage: vue command [options]Options:-V, --version output the version number-h, --help display help for commandCommands:create [options] app-name create a new project powered by vue-cli-serviceadd [options] plugin [pluginOptions] install a plugin and invoke its generator in an already created projectinvoke [options] plugin [pluginOptions] invoke the generator of a plugin in an already created projectinspect [options] [paths...] inspect the webpack config in a project with vue-cli-serviceserve alias of npm run serve in the current projectbuild alias of npm run build in the current projectui [options] start and open the vue-cli uiinit [options] template app-name generate a project from a remote template (legacy API, requiresvue/cli-init)config [options] [value] inspect and modify the configoutdated [options] (experimental) check for outdated vue cli service / pluginsupgrade [options] [plugin-name] (experimental) upgrade vue cli service / pluginsmigrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugininfo print debugging information about your environmenthelp [command] display help for commandRun vue command --help for detailed usage of given command.C:\Users\nash_二、创建vue_test项目 在电脑桌面创建vue_test工程。
2.1 cmd进入桌面
打开cmd窗口输入进入电脑桌面输入命令cd des然后按在Tab键会自动进行代码补全变成了cd Desktop然后回车。
Microsoft Windows [版本 10.0.22621.2134]
(c) Microsoft Corporation。保留所有权利。C:\Users\nash_cd DesktopC:\Users\nash_\Desktop2.2 创建项目
输入以下命令vue create vue_test回车然后选择Vue2回车.
C:\Users\nash_cd DesktopC:\Users\nash_\Desktopvue create vue_testVue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select features之后提示安装成功并告诉你进入到目录cd vue_test然后执行命令npm run serve。此时关闭cmd窗口。
Vue CLI v5.0.8
✨ Creating project in C:\Users\nash_\Desktop\vue_test.
⚙️ Installing CLI plugins. This might take a while...added 861 packages in 3mInvoking generators...Installing additional dependencies...added 92 packages in 2m
⚓ Running completion hooks... Generating README.md... Successfully created project vue_test.Get started with the following commands:$ cd vue_test$ npm run serveC:\Users\nash_\Desktop2.3 运行项目
重新打开cmd进入到目录vue_test执行命令npm run serve按住两遍ctrlc可以停止终端运行。 DONE Compiled successfully in 4573ms 14:05:58App running at:- Local: http://localhost:8080/- Network: http://192.168.2.9:8080/Note that the development build is not optimized.To create a production build, run npm run build.2.4 查看效果
打开浏览器输入网址http://localhost:8080/ 三、脚手架结构分析 3.1 文件目录结构分析
通过VSCode打开vue_test工程 所展示的目录结构如下 具体文件说明 |—— node_modules |—— public| |—— favicon.ico页签图标| |—— index.html主页面|—— src| |—— assets存放静态资源| |—— logo.png| |—— component存放组件| |—— HelloWorld.vue| |—— App.vue汇总所有组件| |—— main.js入口文件|—— .gitignore: git版本管制忽略的配置|—— babel.config.js: babel的配置文件将ES6—— ES5 |—— package.json: 应用包配置文件|—— README.md应用描述文件|—— package-lock.json包版本控制文件3.2 vscode终端打开项目
vscode打开终端 输入npm run serve 同样按下两遍ctrlc停掉终端.
