使用npm/cnpm安装vue及搭建vue项目

准备工作 https://blog.csdn.net/xiaomin_er/article/details/105188483

1.查看是否安装npm或者cnpm

2.安装vue

我这里为了快速下载，使用的是cnpm install vue,也可以采用npm install vue

3.安装vue-cli

cnpm install --global vue-cli

4.测试vue是否安装成功 vue -V 注意后面的V是大写

5.安装webpack

cnpm install --global webpack

cnpm install --global webpack-cli

6.安装完成，输入webpack -v查看是否安装成功

7.新建一个vue项目

vue init webpack “项目名称”

我这里在f盘创建一个 myproject项目 vue init webpack myproject

8.初始化一个vue项目

填写所需信息后，回车执行，一段时间安装完模块后初始化完成。

? Project name vue-start //项目名称
? Project description A Vue.js project // 项目描述
? Author  // 作者名称
? Vue build standalone // 推荐选前者

? Install vue-router?  
// 是否安装vue-router路由组件，也可不安装使用第三方或简单的项目自己写

? Use ESLint to lint your code? 
// 是否使用eslint管理代码，个人项目不推荐

? Set up unti tests?
// 是否使用karma来做单元测试

? Setup e2e tests with Nightwatch?
// 是否安装e2e测试

? Should we run 'npm install' for you after the project has been created?
// 选择使用npm或yarn进行安装模块

9.运行项目

进入项目目录里面，运行cnpm run dev

默认监听8080端口，服务器己经启动，目前是在开发环境下。

利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构，如下：

目录结构

 build -- 大部分是webpack的配置文件
 config -- 配置文件，比如配置监听端口
 node_modules -- 依赖包都在这里
 src -- 主工程文件夹，基本上所有的开发都在这个文件夹进行
 static -- 静态文件目录
 package.json -- 项目的一些配置信息

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/xiaomin_er/article/details/105233336
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-04-19 12:39:48
阅读 ( 1105 )
分类：前端

使用npm/cnpm安装vue及搭建vue项目

目录结构

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看