电脑安装vue项目原码并建立工程
一、npm 版本查看及升级
// 查看版本npm -v// 升级版本npm install -g npm
注：若npm install 报错 permission denied，使用sudo npm install -g npm
二、安装vue相关工具
1. 安装vue
// 最新稳定版npm install vue// 安装vue-cli脚手架构建工具npm install --global vue-cli
安装完成，输入vue -V，如果出现相应的版本号，则说明安装成功。如图：
注：Mac 使用安装vue-cli脚手架的时候报错，
解决方法：
1.切换到/usr/local/lib/node_modules/目录
cd /usr/local/lib/node_modules/
2.删除vue-cli文件夹
open /usr/local/lib/node_modules/
3.重新安装vue-cli
npm install --global vue-cli
2. 安装webpack
npm install --global webpack
npm install --global webpack-cli
安装完成，输入webpack -v，如果出现相应的版本号，则说明安装成功。如图：
三、新建项目
1. 创建新项目
// 创建一个基于 webpack 模板的新项目vue init webpack my-project// 这里需要进行一些配置，默认回车即可
? 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进行安装模块
2. 运行项目
cd my-project
npm run dev
成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：
退出监听，直接关闭cmd窗口即可。
目录结构
-
build -- 大部分是webpack的配置文件
-
config -- 配置文件，比如配置监听端口
-
node_modules -- 依赖包都在这里
-
src -- 主工程文件夹 ，基本上所有的开发都在这个文件夹进行
-
static -- 静态文件目录
-
package.json -- 项目的一些配置信息