最近遇到一门不认识的前端语言--pug，我这么称呼它，我对这个不是很熟悉，希望看到的人不要被我所写的东西误解。从pug到npm，再到vue，原本是为了认识pug这个模板引擎，但在一团乱麻的思绪下选择下载vue，在vue里实现pug的编辑。下面是我自行总结的vue项目创建步骤，用于个人记录：
1>.确定vue项目搭建的文件位置
在D盘或C盘，文件名尽量小写，大写会报错，也不要取中文。
2>.运行命令行
打开命令行，本人使用管理身份打开命令行，并跳转到已经确定的文件夹位置。先到D盘，
C:\WINDOWS\system32>d:
再跳转：
D:\>cd Jfourteen
错误建项目的示范：
D:\Jfourteen>vue init webpack
? Generate project in current directory? No
正确的：
D:\Jfourteen>vue init webpack one
接下来是创建项目的一些问题应答，借鉴袁小萌同学博主的，如下：
Project name（工程名）:回车(含大写字母给我报错了，我给改了my-vue)
Project description（工程介绍）：回车
Author：作者名 ：回车
Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；
Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
回车；
————————————————
原文链接：https://blog.csdn.net/dream_summer/article/details/108867317
以上仅为借鉴，关于一些问题的具体应用尚不清楚，待日后研究。 如下：
D:\Jfourteen>vue init webpack one
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name one
? Project description A Vue.js project
? Author liuyu
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "one".
创建完毕，按照提示转到创建项目的文件夹，如下：
# Project initialization finished!
# ========================
To get started:
cd one
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
按照提示转到指定文件夹，运行npm run dev，如下：
D:\Jfourteen>cd one
D:\Jfourteen\one>npm run dev
> one@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:123092) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
13% building modules 25/28 modules 3 active ...&index=0!D:\Jfourteen\one\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 2511ms 19:44:41
按提示打开地址http://localhost:8081，
结束项目运行：ctrl+c，选择Y即可停止项目的运行。
I Your application is running here: http://localhost:8080
终止批处理操作吗(Y/N)? n
新建项目：
C:\Windows\System32>d:
D:\Jfourteen\one>cd ..
D:\Jfourteen>vue create mytest1
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli
显而易见，此处新建项目的口令用的不是同一个版本的，需要下载新版本。现在很多攻略里用的都是vue.cli3的版本，目前更新到5，于是我把这几个版本都下载了，但是创建的时候出现以下代码，显示创建失败：
C:\WINDOWS\system32>vue create vuetest01
D:\Node.js\node_global\node_modules\@vue\cli\node_modules\vue-template-compiler\index.js:10
throw new Error(
^
Error:
Vue packages version mismatch:
- vue@3.3.4 (D:\Node.js\node_global\node_modules\vue\index.js)
- vue-template-compiler@2.7.14 (D:\Node.js\node_global\node_modules\@vue\cli\node_modules\vue-template-compiler\package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
at Object.<anonymous> (D:\Node.js\node_global\node_modules\@vue\cli\node_modules\vue-template-compiler\index.js:10:9)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.<anonymous> (D:\Node.js\node_global\node_modules\@vue\cli\node_modules\vue-jscodeshift-adapter\src\parse-sfc.js:1:18)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
Node.js v18.16.1
从上面来看，是多版本导致的问题，所以需要卸载原来的版本，卸载完毕：
C:\WINDOWS\system32>npm uninstall vue-cli -g
removed 233 packages in 3s
卸载后查看vue版本失败，于是我再次下载
C:\WINDOWS\system32>vue -V
'vue' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
C:\WINDOWS\system32>vue -V
'vue' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
C:\WINDOWS\system32>npm install -g @vue/cli@3.12.1
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated apollo-datasource@0.10.0: 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-tracing@0.16.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated apollo-server-plugin-base@0.14.0: 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 package's 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-types@0.10.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 package's 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 graphql-extensions@0.16.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
npm WARN deprecated apollo-server-errors@2.5.0: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's 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 @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated apollo-cache-control@0.15.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
npm WARN deprecated apollo-reporting-protobuf@0.8.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 package's 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 uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated apollo-server-caching@0.7.0: This package is part of the legacy caching implementation used by Apollo Server v2 and v3, and is no longer maintained. We recommend you switch to the newer Keyv-based implementation (which is compatible with all versions of Apollo Server). See https://www.apollographql.com/docs/apollo-server/v3/performance/cache-backends#legacy-caching-implementation for more details.
npm WARN deprecated apollo-server-express@2.26.1: The `apollo-server-express` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's 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 @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated apollo-server-env@3.2.0: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's 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 @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated subscriptions-transport-ws@0.9.19: 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 graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
npm WARN deprecated apollo-server-core@2.26.1: The `apollo-server-core` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
changed 957 packages in 51s
卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g
安装新版本npm install @vue/cli –g
安装指定新版本npm install -g @vue/cli@3.12.1
不指定版本号会默认安装最新的版本，目前更新到5点几。
查询下载版本，如下：
C:\WINDOWS\system32>vue -V
3.12.1
新建项目：
vue create 项目名
Please pick a preset=》选择一个配置:default默认有babel、eslint，Manually select features 手动配置。
选择手动配置，根据自己的需要选择，敲空格键配合方向键进行选择。
where do you prefer placing config for …=》配置放在哪里
In dedicated config files =》 每项配置有单独的文件
In package.json =》在package.json 文件中
Save this as a preset for future project? =>是否为保存配置习惯文件，存了后下次新建新项目选择配置时就会有此选项了
Save preset as; =>存个名字
Pick the package …=>运行选择npm或者yarn
————————————————
原文链接：https://blog.csdn.net/dream_summer/article/details/108867317
vue项目结构
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加 前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等。 这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。 注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
1）.babelrc:babel编译参数
2）.editorconfig:编辑器相关的配置，代码格式
3）.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
4）.eslintrc.js : 配置代码格式风格检查规则
5）.gitignore:git上传需要忽略的文件配置
6）.postcssrc.js ：css转换工具
————————————————
原文链接：blog.csdn.net/dream_summe…
注意：## Hbuilder X可以用于编写vue项目
