Vue笔记创建项目

1》下载Nodejs

　　nodejs中文网（http://nodejs.cn/download/）和原网（https://nodejs.org/en/download/ ）站上都可以下，但从速度上来说

https://npm.taobao.org/mirrors/node/v14.7.0/

　　淘宝的镜像更快些，可以改变路径版本来选择，比如我想要12.18.3的版本，那就直接

https://npm.taobao.org/mirrors/node/v12.18.3/

2》安装Nodejs

　　双击运行，一路Next，除了选择安装路径，建议直接D盘或者E盘。

Vue笔记创建项目

　　注意这里默认4个选项，会在系统环境变量中生成路径。

　　在CMD指令行运行这样，标识OK

Vue笔记创建项目

3》配置全局

　　npm默认全局会在【C:Users用户名AppDataRoaming pm】，现在来改变

Vue笔记创建项目

　　然后在CMD中

npm config set prefix "D:
odejs
ode_global"
npm config set cache "D:
odejs
ode_cache"

　　配置后，利用npm root -g来查看全局目录。

　4》环境变量

　　增加系统环境变量：NODE_PATH

Vue笔记创建项目

修改用户环境变量，将此路径改到d: odejs ode_global下

Vue笔记创建项目

5》安装Vue脚手架(全局)

　　npm install -g vue-cli

　　安装完成后，可以查看能创建哪些项目结构

Vue笔记创建项目

6》创建新项目

　　切换到指定目录：

　　执行：vue init webpack my-demo

　　　　　　其中：webpack表示是完整的webpack类型项目;my-demo表示所属目录，如果不填就是当前目录。

　　输入指令后一路回车就行。

Vue笔记创建项目

　　如果出现以下Runtime-only提示也是回车

Vue笔记创建项目

　　目录结构说明：

项目目录：
build----项目构建(webpack)相关代码
config-----配置目录，包括端口号，测试环境，生产环境编译参数等。我们初学可以使用默认的。
node_modules --- 加载的项目依赖模块
src----这里是我们要开发的目录，基本上要做的事情都在这个目录里。以下目录和文件有的是自带的，有的是新建的，方便开发就行。
　　---assets： 放置一些图片，如logo等。　　
　　---App.vue:Vue主组件，我们也可以直接将组件写这里，而不使用 components 目录。
　　---main.js:项目入口文件

   ---components: 可以放第三方子组件文件，
   ---router:路由模块
   ---store:Vuex的存储模块
   ---views：自己定义子组件文件
　　---api:请求模块
　　---config:静态资源，比如下拉框的固定信息等
　　---utiles:工具文件

静态资源目录，如图片、字体等。打包时候这个目录下的文件一定会打包进去
dist---打包生成的最终文件，需要在config里面配置的。
test----初始测试目录，可删除.xxxx----文件这些是一些配置文件，包括语法配置，git配置等。index.html----首页入口文件，你可以添加一些 meta 信息或统计代码啥的。package.json----项目配置文件。
README.md----项目的说明文档，markdown 格式
package.json---项目依赖情况
package-lock.json---在使用npm install会生成，表示当前项目中依赖包版本情况
index.html---调试时候的引导页面

6》如果是老项目

　　执行前，一定要清除npm的缓存,再安装

　　先清除缓存：npm cache clean --force

　在安装依赖：npm install

Vue笔记 创建项目

相关推荐

Vue笔记创建项目