vue学习000（vue开发环境配置）

1.搭建vue运行环境

1.1 express

node -v
sudo apt install nodejs -y
npm -v
sudo apt install npm -y
sudo npm install express-generator -g
# npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported.
# npm install yarn -g
# yarn install
express test(这是项目名)
cd test
npm install
# 将Vue build后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面
npm start

• app.js：启动文件，或者说入口文件

• package.json：存储着工程的信息及模块依赖，当在 dependencies 中添加依赖的模块时，运行 npm install，npm 会检查当前目录下的 package.json，并自动安装所有指定的模块

• node_modules：存放 package.json 中安装的模块，当你在 package.json 添加依赖的模块并安装后，存放在这个文件夹下

• public：存放 image、css、js 等文件

• routes：存放路由文件

• views：存放视图文件或者说模版文件

• bin：存放可执行文件

1.2 yarn

node -v
sudo apt install nodejs -y
npm -v
sudo apt install npm -y
sudo npm install express-generator -g
sudo npm install -g yarn
cd project_dir
yarn install
yarn run start:dev

#可能需要升级node版本到最新稳定版
sudo npm cache clean -f  #清除npm缓存
sudo npm install -g n    #安装n模块（n模块是管理nodejs的版本的）
sudo n stable            #升级node.js到最新稳定版
node -v

2.遇到的问题解决

yarn install卡住的问题

cd 项目根目录
vim .yarnrc
#add:
registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

或者：

yarn config set registry https://registry.npm.taobao.org -g